@@ -73,13 +73,9 @@ adheres to the following interface:
7373 loadImportSource(source : string , sourceType : " NAME" | " URL" ) => Module ;
7474 }
7575
76- type SourceInfo = {
77- source: string ;
78- sourceType: string ;
79- }
80-
81- type bind = (node : HTMLElement , context : LayoutContext , source : SourceInfo ) => ({
82- render(component : any , props : Object , childModels : Array <any >): void ;
76+ type bind = (node : HTMLElement , context : LayoutContext ) => ({
77+ create(type : any , props : Object , children : Array <any >): any ;
78+ render(element ): void ;
8379 unmount(): void ;
8480 });
8581
@@ -90,20 +86,20 @@ adheres to the following interface:
9086 - ``context `` can send events back to the server and load "import sources"
9187 (like a custom component module).
9288
93- - ``component `` is a named export of the current module.
89+ - ``type``is a named export of the current module, or a string (e.g. ``"div" ``,
90+ ``"button" ``, etc.)
9491
9592 - ``props `` is an object containing attributes and callbacks for the given
9693 ``component ``.
9794
98- - ``childModels `` is an array of unrendered VDOM elements. Passing them in this raw
99- form allows for other frameworks besides react to render them as needed. If you
100- are using react, you can just use the ``idom-client-react `` library to process
101- them. See :ref: `Distributing Javascript via PyPI_ ` for an example usage.
95+ - ``children `` is an array of elements which were constructed by recursively calling
96+ ``create ``.
10297
10398The interface returned by ``bind() `` can be thought of as being similar to that of
10499React.
105100
106- - ``render `` ➜ |React.createElement |_ and |ReactDOM.render |_
101+ - ``create `` ➜ |React.createElement |_
102+ - ``render `` ➜ |ReactDOM.render |_
107103- ``unmount `` ➜ |ReactDOM.unmountComponentAtNode |_
108104
109105.. |React.createElement | replace :: ``React.createElement ``
@@ -123,7 +119,8 @@ It will be used in the following manner:
123119 const binding = bind (node, context);
124120
125121 // on every render
126- binding .render (component, props, children);
122+ let element = binding .create (type, props, children)
123+ binding .render (element);
127124
128125 // once on unmount
129126 binding .unmount ();
@@ -225,27 +222,16 @@ To start, let's take a look at the file structure we'll be building:
225222
226223 import * as React from " react" ;
227224 import * as ReactDOM from " react-dom" ;
228- import { LayoutConfigContext , elementChildren } from " idom-client-react" ;
229225
230226 export function bind (node , config ) {
231227 return {
232- render : (component , props , childModels ) =>
233- ReactDOM .render (createElement (config, component, props, childModels), node),
228+ create : (component , props , children ) =>
229+ React .createElement (component, props, ... children),
230+ render : (element ) => ReactDOM .render (element, node),
234231 unmount : () => ReactDOM .unmountComponentAtNode (node),
235232 };
236233 }
237234
238- function createElement (config , component , props , childModels ) {
239- // Render child models with idom-client-react
240- return React .createElement (
241- LayoutConfigContext .Provider ,
242- { value: config },
243- React .createElement (
244- component, props, ... elementChildren (children)
245- )
246- )
247- }
248-
249235 // exports for your components
250236 export YourFirstComponent (props ) {...};
251237 export YourSecondComponent (props ) {...};
0 commit comments