From 6313f18fbc9fc0d142287d6b907f34064546ce31 Mon Sep 17 00:00:00 2001 From: Rob Mayer <5171361+RobMayer@users.noreply.github.com> Date: Tue, 8 Aug 2023 12:44:33 -0400 Subject: [PATCH] removed renderUI function as it was superfluous. --- README.md | 46 ++++++++++++++-------------------------------- package.json | 2 +- src/index.ts | 8 -------- 3 files changed, 15 insertions(+), 41 deletions(-) diff --git a/README.md b/README.md index a574e1d..6a77487 100644 --- a/README.md +++ b/README.md @@ -48,17 +48,25 @@ additionally, you'll need to add this import at the top of any file that uses JS `import { jsxInTTPG } from "jsx-in-ttpg";` -## adding JSX to a UIElement or ScreenUIElement +## adding JSX to a UIElement or ScreenUIElement or a vanilla Widget -use the provided `renderUI` function to add JSX to the UIElement/ScreenUIElement. The top-level JSX tag must be a vanilla widget (or a string or array string, since jsxInTTPG will wrap a lone string in a `` widget automagically). This could also be a custom component, so long as any nested components resolve to a structure with a top-level widget. +use the provided `render` function to ensure a JSX tag is a Widget. The top-level JSX tag must be a vanilla widget (or a string or array string, since jsxInTTPG will wrap a lone string in a `` widget automagically). This could also be a custom component, so long as any nested components resolve to a structure with a top-level widget. ```tsx import { render, jsxInTTPG } from "jsx-in-ttpg"; const ui = new UIElement(); /* do stuff to set up ui element */ +ui.widget = render(Hello World); +refObject.addUI(ui); +``` + +in instances where you need to set a new widget, or add a child, or if you want to mix-n-match JSX with vanilla TTPG elements, you can make use of the `render()` function in the same way: + +```tsx +const layoutBox = new LayoutBox(); -renderUI(Hello There, ui); +layoutBox.setChild(render(some text)); ``` ## Fragments @@ -84,43 +92,17 @@ const MyComponent = () => { const ui = new UIElement(); -renderUI( +ui.widget = render( - , - ui + ); refObject.addUI(ui); - -/* note that renderUI returns the UIElement, so this could be further condensed like so, if you really want. */ - -refObject.addUI( - renderUI( - - - - - , - new UIElement() - ) -); -``` - -## setting a widget property directly - -in instances where you need to set a new widget, or add a child, or if you want to mix-n-match JSX with vanilla TTPG elements, you need to make use of the provided `render()` function: - -```tsx -const layoutBox = new LayoutBox(); - -layoutBox.setChild(render(some text)); ``` -this garauntees that the JSX will return a widget, and not some other value type like a primitive (render will actually wrap that in a `` element, if that's the case). - # Syntax Every Tabletop Playground widget is resprestented in a JSX intrinsic element with certain attributes that function as function calls or property setters for that widget. @@ -215,7 +197,7 @@ The canvas has no additional attributes. however, canvases take an atypical chil - `` can take multiple `canvasChild` calls as children. the second argument of canvasChild can be a string or a single widget. -### LayoutBox +#### LayoutBox ```tsx diff --git a/package.json b/package.json index 559d2ad..b274221 100644 --- a/package.json +++ b/package.json @@ -1,7 +1,7 @@ { "name": "jsx-in-ttpg", "license": "UNLICENSE", - "version": "1.1.2", + "version": "1.1.3", "scripts": { "build": "tsup src/index.ts --format cjs,esm --dts --no-splitting", "clean": "rm -rf ./dist", diff --git a/src/index.ts b/src/index.ts index d7e95da..09848d2 100644 --- a/src/index.ts +++ b/src/index.ts @@ -52,14 +52,6 @@ export const useRef = (initial: T | null = null): RefHandle return ref; }; -export const renderUI = (widget: JSX.Element, element: UIElement | ScreenUIElement) => { - if (!(widget instanceof Widget)) { - throw Error("Top-level JSX.Element must be a widget"); - } - element.widget = widget; - return element; -}; - export const asTextNode = (children: JSXNode): TextNode => { if (!(children instanceof Widget)) { return children;