Merge pull request #9 from thepassle/refactor/render-children

refactor: render children
thepassle · Apr 3, 2024 · 620eade · 620eade
2 parents beca435 + f155e3f
commit 620eade
Show file tree

Hide file tree

Showing 7 changed files with 29 additions and 30 deletions.
diff --git a/package-lock.json b/package-lock.json
diff --git a/packages/core/package.json b/packages/core/package.json
@@ -1,14 +1,14 @@
 {
   "name": "swtl",
-  "version": "0.3.2",
+  "version": "0.3.3",
   "description": "",
   "main": "index.js",
   "type": "module",
   "scripts": {
     "dev": "esbuild ./demo/sw.js --bundle --outfile=./demo/bundled-sw.js --watch --format=iife --servedir=demo",
     "start": "node --watch dev.js",
     "test": "node --test test/*.test.js",
-    "test:watch": "node --watch --test tests/tests.js",
+    "test:watch": "node --watch --test test/*.test.js",
     "lint:types": "tsc",
     "lint:types:watch": "tsc --watch"
   },
@@ -63,7 +63,7 @@
   "author": "",
   "license": "ISC",
   "devDependencies": {
-    "@swtl/lit": "^0.1.4"
+    "@swtl/lit": "^0.1.5"
   },
   "dependencies": {}
 }
diff --git a/packages/core/render.js b/packages/core/render.js
@@ -109,7 +109,11 @@ async function* handle(chunk, promises, customElementRenderers) {
   } else if (chunk?.kind === CUSTOM_ELEMENT_SYMBOL) {
     const renderer = customElementRenderers.find(r => r.match(chunk))
     if (renderer) {
-      yield* renderer.render({...chunk, renderers: customElementRenderers});
+      /**
+       * @param {AsyncIterable<unknown> | Iterable<unknown>} children 
+       */
+      const renderChildren = (children) => _render(children, promises, customElementRenderers);
+      yield* renderer.render(chunk, renderChildren);
     }
   } else if (chunk?.kind === COMPONENT_SYMBOL) {
     const children = [];

diff --git a/packages/core/ssr/default.js b/packages/core/ssr/default.js
@@ -1,4 +1,3 @@
-import { render as swtlRender } from '../render.js';
 import { DEFAULT_RENDERER_SYMBOL } from '../symbol.js';
 
 /**
@@ -14,22 +13,20 @@ import { DEFAULT_RENDERER_SYMBOL } from '../symbol.js';
  *  tag: string,
  *  children: Children,
  *  attributes: Attribute[],
- *  renderers: CustomElementRenderer[]
  * }} args
+ * @param {(children: Children) => AsyncGenerator<string, void, unknown>} renderChildren
  */
-async function* render({ tag, children, attributes, renderers }) {
+async function* render({ tag, children, attributes }, renderChildren) {
   const attrs = attributes.reduce((acc, { name, value }, index) => {
     const attribute = typeof value === 'boolean' && value ? name : `${name}="${value}"`;
     return index < attributes.length - 1 ? `${acc}${attribute} ` : `${acc}${attribute}`;
   }, '');
   yield attrs.length ? `<${tag} ${attrs}>` : `<${tag}>`;
-  yield* swtlRender(children, renderers);
+  yield* renderChildren(children);
   yield `</${tag}>`;
 }
 
-/**
- * @type {CustomElementRenderer}
- */
+/** @type {CustomElementRenderer} */
 export const defaultRenderer = {
   name: DEFAULT_RENDERER_SYMBOL,
   match() {

diff --git a/packages/core/types.ts b/packages/core/types.ts
@@ -33,7 +33,9 @@ export interface CustomElementRenderer {
     children: Children, 
     attributes: Attribute[], 
     renderers: CustomElementRenderer[] 
-  }) => AsyncGenerator<string>;
+  },
+  renderChildren: (children: Children) => AsyncGenerator<string>
+  ) => AsyncGenerator<string>;
 }
 
 export type RouteResult = void | Promise<void> | Response | Promise<Response> | HtmlResult | Promise<HtmlResult>;

diff --git a/packages/lit/index.js b/packages/lit/index.js
@@ -1,8 +1,6 @@
 import './dom-shim.js';
 import { LitElementRenderer } from "@lit-labs/ssr/lib/lit-element-renderer.js";
 import { getElementRenderer } from "@lit-labs/ssr/lib/element-renderer.js";
-import { render as swtlRender } from 'swtl/render.js';
-
 
 /**
  * @typedef {import('swtl').CustomElementRenderer} CustomElementRenderer
@@ -14,13 +12,13 @@ import { render as swtlRender } from 'swtl/render.js';
 
 /**
  * @param {{
-*  tag: string,
-*  children: Children,
-*  attributes: Attribute[],
-*  renderers: CustomElementRenderer[]
-* }} args
-*/
-async function* render({ tag, children, attributes, renderers }) {
+ *  tag: string,
+ *  children: Children,
+ *  attributes: Attribute[],
+ * }} args
+ * @param {(children: Children) => AsyncGenerator<string, void, unknown>} renderChildren
+ */
+async function* render({ tag, children, attributes }, renderChildren) {
   const renderInfo = {
     elementRenderers: [LitElementRenderer],
     customElementInstanceStack: [],
@@ -42,7 +40,7 @@ async function* render({ tag, children, attributes, renderers }) {
   // @ts-expect-error
   yield* renderer.renderShadow(renderInfo);
   yield `</template>`;
-  yield* swtlRender(children, renderers);
+  yield* renderChildren(children);
   yield `</${tag}>`;
 }
 

diff --git a/packages/lit/package.json b/packages/lit/package.json
@@ -1,6 +1,6 @@
 {
   "name": "@swtl/lit",
-  "version": "0.1.4",
+  "version": "0.1.5",
   "description": "",
   "type": "module",
   "main": "index.js",
@@ -15,8 +15,7 @@
   "license": "ISC",
   "dependencies": {
     "@lit-labs/ssr": "^3.2.2",
-    "@lit-labs/ssr-dom-shim": "^1.2.0",
-    "swtl": "^0.3.2"
+    "@lit-labs/ssr-dom-shim": "^1.2.0"
   },
   "devDependencies": {}
 }