@cratis/scene.react 3.7.0 → 4.0.0

package/dist/esm/renderer/createReactRenderer.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"createReactRenderer.d.ts","sourceRoot":"","sources":["../../../renderer/createReactRenderer.tsx"],"names":[],"mappings":"AAGA,OAAO,EAAE,SAAS,EAAiB,MAAM,OAAO,CAAC;AACjD,OAAO,EAAE,QAAQ,EAAE,MAAM,sBAAsB,CAAC;AAEhD,OAAO,EAAE,iBAAiB,EAAE,MAAM,qBAAqB,CAAC;AAYxD,wBAAgB,mBAAmB,CAAC,QAAQ,EAAE,iBAAiB,GAAG,QAAQ,CAAC,SAAS,CAAC,CAgCpF"}
+{"version":3,"file":"createReactRenderer.d.ts","sourceRoot":"","sources":["../../../renderer/createReactRenderer.tsx"],"names":[],"mappings":"AAGA,OAAO,EAAE,SAAS,EAAiB,MAAM,OAAO,CAAC;AACjD,OAAO,EAAE,QAAQ,EAAE,MAAM,sBAAsB,CAAC;AAEhD,OAAO,EAAE,iBAAiB,EAAE,MAAM,qBAAqB,CAAC;AAaxD,wBAAgB,mBAAmB,CAAC,QAAQ,EAAE,iBAAiB,GAAG,QAAQ,CAAC,SAAS,CAAC,CAgCpF"}

package/dist/esm/renderer/createReactRenderer.js

@@ -1,4 +1,5 @@
 import { createElement } from 'react';
+import { InteractiveComponent } from './InteractiveComponent.js';
 import { childStyle, panelStyle } from './panelLayout.js';
 import { UnresolvedComponent } from './UnresolvedComponent.js';
 
@@ -29,8 +30,9 @@ import { UnresolvedComponent } from './UnresolvedComponent.js';
         },
         renderExternalComponent (element, slots) {
             const Component = registry[element.componentName] ?? UnresolvedComponent;
-            return /*#__PURE__*/ createElement(Component, {
+            return /*#__PURE__*/ createElement(InteractiveComponent, {
                 key: element.id,
+                component: Component,
                 element,
                 slots
             });

package/dist/esm/renderer/createReactRenderer.js.map

@@ -1 +1 @@
-{"version":3,"file":"createReactRenderer.js","sources":["../../../renderer/createReactRenderer.tsx"],"sourcesContent":["// Copyright (c) Cratis. All rights reserved.\n// Licensed under the MIT license. See LICENSE file in the project root for full license information.\n\nimport { ReactNode, createElement } from 'react';\nimport { Renderer } from '@cratis/scene.engine';\nimport { ContentControl, ExternalComponent, ItemsControl, Panel } from '@cratis/scene.model';\nimport { ComponentRegistry } from './ComponentRegistry';\nimport { childStyle, panelStyle } from './panelLayout';\nimport { UnresolvedComponent } from './UnresolvedComponent';\n\n/**\n * Creates a {@link Renderer} that turns a Scene element tree into React elements.\n *\n * `ItemsControl` and `ContentControl` render as plain wrapping `div`s. A `Panel` renders as the\n * arrangement it declares - a grid, a stack, a wrap or a dock - because that is what those panels are\n * for; see `panelLayout` for the mapping. Arranging a *layout's slots* by `flow`/`freeform` is a\n * different thing and stays Scene#4's, layered on top of this renderer rather than folded into it.\n */\nexport function createReactRenderer(registry: ComponentRegistry): Renderer<ReactNode> {\n    return {\n        renderContentControl(element: ContentControl, content: ReactNode): ReactNode {\n            return createElement('div', { key: element.id, 'data-scene-id': element.id, 'data-scene-kind': 'ContentControl' }, content);\n        },\n\n        renderItemsControl(element: ItemsControl, items: ReactNode[]): ReactNode {\n            return createElement('div', { key: element.id, 'data-scene-id': element.id, 'data-scene-kind': 'ItemsControl' }, items);\n        },\n\n        renderExternalComponent(element: ExternalComponent, slots: Record<string, ReactNode[]>): ReactNode {\n            const Component = registry[element.componentName] ?? UnresolvedComponent;\n            return createElement(Component, { key: element.id, element, slots });\n        },\n\n        renderPanel(element: Panel, children: ReactNode[]): ReactNode {\n            // The rendered children arrive in the same order as `element.children`, so a panel that places\n            // its children individually - a grid cell, a docked edge - can wrap each one in the box that\n            // places it without needing to re-render anything.\n            const placed = children.map((child, index) => {\n                const style = childStyle(element, element.children[index], index);\n                return style\n                    ? createElement('div', { key: `${element.id}-${index}`, 'data-scene-placement': index, style }, child)\n                    : child;\n            });\n\n            return createElement(\n                'div',\n                { key: element.id, 'data-scene-id': element.id, 'data-scene-kind': 'Panel', style: panelStyle(element) },\n                placed);\n        },\n    };\n}\n"],"names":["createReactRenderer","registry","renderContentControl","element","content","createElement","key","id","renderItemsControl","items","renderExternalComponent","slots","Component","componentName","UnresolvedComponent","renderPanel","children","placed","map","child","index","style","childStyle","panelStyle"],"mappings":";;;;AAAA;AACA;AASA;;;;;;;IAQO,SAASA,mBAAAA,CAAoBC,QAA2B,EAAA;IAC3D,OAAO;QACHC,oBAAAA,CAAAA,CAAqBC,OAAuB,EAAEC,OAAkB,EAAA;AAC5D,YAAA,qBAAOC,cAAc,KAAA,EAAO;AAAEC,gBAAAA,GAAAA,EAAKH,QAAQI,EAAE;AAAE,gBAAA,eAAA,EAAiBJ,QAAQI,EAAE;gBAAE,iBAAA,EAAmB;aAAiB,EAAGH,OAAAA,CAAAA;AACvH,QAAA,CAAA;QAEAI,kBAAAA,CAAAA,CAAmBL,OAAqB,EAAEM,KAAkB,EAAA;AACxD,YAAA,qBAAOJ,cAAc,KAAA,EAAO;AAAEC,gBAAAA,GAAAA,EAAKH,QAAQI,EAAE;AAAE,gBAAA,eAAA,EAAiBJ,QAAQI,EAAE;gBAAE,iBAAA,EAAmB;aAAe,EAAGE,KAAAA,CAAAA;AACrH,QAAA,CAAA;QAEAC,uBAAAA,CAAAA,CAAwBP,OAA0B,EAAEQ,KAAkC,EAAA;AAClF,YAAA,MAAMC,YAAYX,QAAQ,CAACE,OAAAA,CAAQU,aAAa,CAAC,IAAIC,mBAAAA;AACrD,YAAA,qBAAOT,cAAcO,SAAAA,EAAW;AAAEN,gBAAAA,GAAAA,EAAKH,QAAQI,EAAE;AAAEJ,gBAAAA,OAAAA;AAASQ,gBAAAA;AAAM,aAAA,CAAA;AACtE,QAAA,CAAA;QAEAI,WAAAA,CAAAA,CAAYZ,OAAc,EAAEa,QAAqB,EAAA;;;;AAI7C,YAAA,MAAMC,MAAAA,GAASD,QAAAA,CAASE,GAAG,CAAC,CAACC,KAAAA,EAAOC,KAAAA,GAAAA;AAChC,gBAAA,MAAMC,QAAQC,UAAAA,CAAWnB,OAAAA,EAASA,QAAQa,QAAQ,CAACI,MAAM,EAAEA,KAAAA,CAAAA;gBAC3D,OAAOC,KAAAA,iBACDhB,cAAc,KAAA,EAAO;AAAEC,oBAAAA,GAAAA,EAAK,GAAGH,OAAAA,CAAQI,EAAE,CAAC,CAAC,EAAEa,KAAAA,CAAAA,CAAO;oBAAE,sBAAA,EAAwBA,KAAAA;AAAOC,oBAAAA;AAAM,iBAAA,EAAGF,KAAAA,CAAAA,GAC9FA,KAAAA;AACV,YAAA,CAAA,CAAA;AAEA,YAAA,qBAAOd,cACH,KAAA,EACA;AAAEC,gBAAAA,GAAAA,EAAKH,QAAQI,EAAE;AAAE,gBAAA,eAAA,EAAiBJ,QAAQI,EAAE;gBAAE,iBAAA,EAAmB,OAAA;AAASc,gBAAAA,KAAAA,EAAOE,UAAAA,CAAWpB,OAAAA;aAAS,EACvGc,MAAAA,CAAAA;AACR,QAAA;AACJ,KAAA;AACJ;;"}
+{"version":3,"file":"createReactRenderer.js","sources":["../../../renderer/createReactRenderer.tsx"],"sourcesContent":["// Copyright (c) Cratis. All rights reserved.\n// Licensed under the MIT license. See LICENSE file in the project root for full license information.\n\nimport { ReactNode, createElement } from 'react';\nimport { Renderer } from '@cratis/scene.engine';\nimport { ContentControl, ExternalComponent, ItemsControl, Panel } from '@cratis/scene.model';\nimport { ComponentRegistry } from './ComponentRegistry';\nimport { InteractiveComponent } from './InteractiveComponent';\nimport { childStyle, panelStyle } from './panelLayout';\nimport { UnresolvedComponent } from './UnresolvedComponent';\n\n/**\n * Creates a {@link Renderer} that turns a Scene element tree into React elements.\n *\n * `ItemsControl` and `ContentControl` render as plain wrapping `div`s. A `Panel` renders as the\n * arrangement it declares - a grid, a stack, a wrap or a dock - because that is what those panels are\n * for; see `panelLayout` for the mapping. Arranging a *layout's slots* by `flow`/`freeform` is a\n * different thing and stays Scene#4's, layered on top of this renderer rather than folded into it.\n */\nexport function createReactRenderer(registry: ComponentRegistry): Renderer<ReactNode> {\n    return {\n        renderContentControl(element: ContentControl, content: ReactNode): ReactNode {\n            return createElement('div', { key: element.id, 'data-scene-id': element.id, 'data-scene-kind': 'ContentControl' }, content);\n        },\n\n        renderItemsControl(element: ItemsControl, items: ReactNode[]): ReactNode {\n            return createElement('div', { key: element.id, 'data-scene-id': element.id, 'data-scene-kind': 'ItemsControl' }, items);\n        },\n\n        renderExternalComponent(element: ExternalComponent, slots: Record<string, ReactNode[]>): ReactNode {\n            const Component = registry[element.componentName] ?? UnresolvedComponent;\n            return createElement(InteractiveComponent, { key: element.id, component: Component, element, slots });\n        },\n\n        renderPanel(element: Panel, children: ReactNode[]): ReactNode {\n            // The rendered children arrive in the same order as `element.children`, so a panel that places\n            // its children individually - a grid cell, a docked edge - can wrap each one in the box that\n            // places it without needing to re-render anything.\n            const placed = children.map((child, index) => {\n                const style = childStyle(element, element.children[index], index);\n                return style\n                    ? createElement('div', { key: `${element.id}-${index}`, 'data-scene-placement': index, style }, child)\n                    : child;\n            });\n\n            return createElement(\n                'div',\n                { key: element.id, 'data-scene-id': element.id, 'data-scene-kind': 'Panel', style: panelStyle(element) },\n                placed);\n        },\n    };\n}\n"],"names":["createReactRenderer","registry","renderContentControl","element","content","createElement","key","id","renderItemsControl","items","renderExternalComponent","slots","Component","componentName","UnresolvedComponent","InteractiveComponent","component","renderPanel","children","placed","map","child","index","style","childStyle","panelStyle"],"mappings":";;;;;AAAA;AACA;AAUA;;;;;;;IAQO,SAASA,mBAAAA,CAAoBC,QAA2B,EAAA;IAC3D,OAAO;QACHC,oBAAAA,CAAAA,CAAqBC,OAAuB,EAAEC,OAAkB,EAAA;AAC5D,YAAA,qBAAOC,cAAc,KAAA,EAAO;AAAEC,gBAAAA,GAAAA,EAAKH,QAAQI,EAAE;AAAE,gBAAA,eAAA,EAAiBJ,QAAQI,EAAE;gBAAE,iBAAA,EAAmB;aAAiB,EAAGH,OAAAA,CAAAA;AACvH,QAAA,CAAA;QAEAI,kBAAAA,CAAAA,CAAmBL,OAAqB,EAAEM,KAAkB,EAAA;AACxD,YAAA,qBAAOJ,cAAc,KAAA,EAAO;AAAEC,gBAAAA,GAAAA,EAAKH,QAAQI,EAAE;AAAE,gBAAA,eAAA,EAAiBJ,QAAQI,EAAE;gBAAE,iBAAA,EAAmB;aAAe,EAAGE,KAAAA,CAAAA;AACrH,QAAA,CAAA;QAEAC,uBAAAA,CAAAA,CAAwBP,OAA0B,EAAEQ,KAAkC,EAAA;AAClF,YAAA,MAAMC,YAAYX,QAAQ,CAACE,OAAAA,CAAQU,aAAa,CAAC,IAAIC,mBAAAA;AACrD,YAAA,qBAAOT,cAAcU,oBAAAA,EAAsB;AAAET,gBAAAA,GAAAA,EAAKH,QAAQI,EAAE;gBAAES,SAAAA,EAAWJ,SAAAA;AAAWT,gBAAAA,OAAAA;AAASQ,gBAAAA;AAAM,aAAA,CAAA;AACvG,QAAA,CAAA;QAEAM,WAAAA,CAAAA,CAAYd,OAAc,EAAEe,QAAqB,EAAA;;;;AAI7C,YAAA,MAAMC,MAAAA,GAASD,QAAAA,CAASE,GAAG,CAAC,CAACC,KAAAA,EAAOC,KAAAA,GAAAA;AAChC,gBAAA,MAAMC,QAAQC,UAAAA,CAAWrB,OAAAA,EAASA,QAAQe,QAAQ,CAACI,MAAM,EAAEA,KAAAA,CAAAA;gBAC3D,OAAOC,KAAAA,iBACDlB,cAAc,KAAA,EAAO;AAAEC,oBAAAA,GAAAA,EAAK,GAAGH,OAAAA,CAAQI,EAAE,CAAC,CAAC,EAAEe,KAAAA,CAAAA,CAAO;oBAAE,sBAAA,EAAwBA,KAAAA;AAAOC,oBAAAA;AAAM,iBAAA,EAAGF,KAAAA,CAAAA,GAC9FA,KAAAA;AACV,YAAA,CAAA,CAAA;AAEA,YAAA,qBAAOhB,cACH,KAAA,EACA;AAAEC,gBAAAA,GAAAA,EAAKH,QAAQI,EAAE;AAAE,gBAAA,eAAA,EAAiBJ,QAAQI,EAAE;gBAAE,iBAAA,EAAmB,OAAA;AAASgB,gBAAAA,KAAAA,EAAOE,UAAAA,CAAWtB,OAAAA;aAAS,EACvGgB,MAAAA,CAAAA;AACR,QAAA;AACJ,KAAA;AACJ;;"}

package/dist/esm/renderer/index.d.ts

@@ -1,4 +1,5 @@
 export * from './ComponentRegistry';
 export * from './UnresolvedComponent';
 export * from './createReactRenderer';
+export * from './InteractiveComponent';
 //# sourceMappingURL=index.d.ts.map

package/dist/esm/renderer/index.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../../renderer/index.ts"],"names":[],"mappings":"AAGA,cAAc,qBAAqB,CAAC;AACpC,cAAc,uBAAuB,CAAC;AACtC,cAAc,uBAAuB,CAAC"}
+{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../../renderer/index.ts"],"names":[],"mappings":"AAGA,cAAc,qBAAqB,CAAC;AACpC,cAAc,uBAAuB,CAAC;AACtC,cAAc,uBAAuB,CAAC;AACtC,cAAc,wBAAwB,CAAC"}

package/dist/esm/renderer/index.js

@@ -1,4 +1,5 @@
 export * from './ComponentRegistry';
 export * from './UnresolvedComponent';
 export * from './createReactRenderer';
+export * from './InteractiveComponent';
 //# sourceMappingURL=index.js.map

package/dist/esm/renderer/index.js.map

@@ -1 +1 @@
-{"version":3,"file":"index.js","sourceRoot":"","sources":["../../../renderer/index.ts"],"names":[],"mappings":"AAGA,cAAc,qBAAqB,CAAC;AACpC,cAAc,uBAAuB,CAAC;AACtC,cAAc,uBAAuB,CAAC"}
+{"version":3,"file":"index.js","sourceRoot":"","sources":["../../../renderer/index.ts"],"names":[],"mappings":"AAGA,cAAc,qBAAqB,CAAC;AACpC,cAAc,uBAAuB,CAAC;AACtC,cAAc,uBAAuB,CAAC;AACtC,cAAc,wBAAwB,CAAC"}