comark-solid 0.2.0-next.0 → 0.2.0-next.2

package/README.md

@@ -107,7 +107,7 @@ Use the `:` prefix to pass typed values:
 ### Slots
 
 The default slot is passed as `children`.
-Named slots (e.g. `#header`) are passed as camelCase props prefixed with `slot` (`slotHeader`).
+Named slots (e.g. `#header`) are passed as props prefixed with `slot` (`slotHeader`).
 
 ```markdown
 ::card

package/dist/index.js

@@ -1,6 +1,6 @@
-import { className, createComponent, dynamic, effect, insert, mergeProps, template } from "@solidjs/web";
+import { className, createComponent, dynamic, effect, insert, mergeProps, readShallow, template } from "@solidjs/web";
 import { parseMarkdown } from "comark";
-import { isMarkdownDocument, resolveAttributes } from "comark/utils";
+import { isHtmlVoidElement, isMarkdownDocument, pascalCase, resolveAttributes, toNativeAttributes } from "comark/utils";
 import { Loading, createMemo, merge } from "solid-js";
 //#region src/utils/ast.ts
 function getTag(node) {
@@ -36,26 +36,33 @@ function toElementNode(node) {
 		node
 	};
 }
-const VOID_ELEMENTS = /* @__PURE__ */ new Set([
-	"hr",
-	"br",
-	"img"
-]);
 function resolveProps(node, renderData) {
 	return resolveAttributes(getAttributes(node), renderData, { parseJson: true });
 }
+function scopeRenderData(node, props, renderData) {
+	return Object.keys(getAttributes(node)).some((key) => key !== "$") ? {
+		...renderData,
+		props
+	} : renderData;
+}
 function getSlotName(node) {
 	if (getTag(node) !== "template") return null;
 	const props = getAttributes(node);
-	if (typeof props.name !== "string" || props.name.trim() === "") return null;
-	return props.name.trim();
+	const name = props.name || Object.keys(props).find((key) => key.startsWith("#"))?.slice(1);
+	if (typeof name !== "string" || name.trim() === "") return null;
+	return name.trim();
 }
 function getSlotPropName(slotName) {
 	if (slotName === "default") return "children";
 	return `slot${slotName.charAt(0).toUpperCase() + slotName.slice(1)}`;
 }
 function resolveComponent(element, components) {
-	const component = components[element.tag];
+	function lookup(tag) {
+		const name = pascalCase(tag);
+		return components[`Prose${name}`] || components[name] || components[tag];
+	}
+	const as = getAttributes(element.node).as;
+	const component = typeof as === "string" && lookup(as) || lookup(element.tag);
 	if (!component) return null;
 	return {
 		...element,
@@ -77,10 +84,7 @@ function createNodeRenderer(components) {
 	function renderCustomComponent(element, context) {
 		const { component, node } = element;
 		const props = resolveProps(node, context.renderData);
-		const slots = partitionIntoSlots(node, Object.keys(props).length > 0 ? {
-			...context.renderData,
-			props
-		} : context.renderData);
+		const slots = partitionIntoSlots(node, scopeRenderData(node, props, context.renderData));
 		const CustomComponent = dynamic(() => component);
 		return createComponent(Loading, {
 			fallback: null,
@@ -91,12 +95,14 @@ function createNodeRenderer(components) {
 	}
 	function renderNativeElement(element, context) {
 		const { tag, node } = element;
-		const props = resolveProps(node, context.renderData);
+		const resolved = resolveProps(node, context.renderData);
+		const props = toNativeAttributes(tag, node, resolved);
+		const renderData = scopeRenderData(node, resolved, context.renderData);
 		const Component = dynamic(() => tag);
-		if (VOID_ELEMENTS.has(tag)) return createComponent(Component, props);
-		const children = getChildren(node).map((child) => renderNode(child, {
-			...context,
-			parent: node
+		if (isHtmlVoidElement(tag)) return createComponent(Component, props);
+		const children = getChildren(node).filter((child) => !getSlotName(child)).map((child) => renderNode(child, {
+			parent: node,
+			renderData
 		})).filter(Boolean);
 		return createComponent(Component, mergeProps(props, { children }));
 	}
@@ -109,7 +115,7 @@ function createNodeRenderer(components) {
 			if (slotName) {
 				const propName = getSlotPropName(slotName);
 				namedSlots[propName] = getChildren(child).map((slotChild) => renderNode(slotChild, {
-					parent: child,
+					parent: node,
 					renderData: childRenderData
 				})).filter(Boolean);
 				continue;
@@ -174,7 +180,7 @@ const MarkdownDocument = (_props) => {
 	const wrapperClass = createMemo(() => ["comark-content", props.class].map((cls) => cls?.trim()).filter(Boolean).join(" "));
 	var _el$ = _tmpl$();
 	insert(_el$, renderedNodes);
-	effect(() => wrapperClass(), (_v$, _$p) => {
+	effect(() => readShallow(wrapperClass()), (_v$, _$p) => {
 		className(_el$, _v$, _$p);
 	});
 	return _el$;
@@ -230,7 +236,7 @@ const Markdown = (_props) => {
 		get data() {
 			return props.data;
 		},
-		get ["class"]() {
+		get "class"() {
 			return props.class;
 		}
 	});

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "comark-solid",
-  "version": "0.2.0-next.0",
+  "version": "0.2.0-next.2",
   "description": "Solid renderer for Comark.",
   "keywords": [
     "comark",
@@ -36,21 +36,21 @@
   },
   "devDependencies": {
     "@solidjs/testing-library": "^1.0.0-beta.3",
-    "@solidjs/vite-plugin": "^3.0.0-next.39",
-    "@solidjs/web": "2.0.0-rc.6",
+    "@solidjs/vite-plugin": "^3.0.0-next.47",
+    "@solidjs/web": "2.0.0-rc.13",
     "@testing-library/jest-dom": "^7.0.1",
     "bumpp": "^11.1.0",
-    "comark": "^0.6.2",
-    "eslint-plugin-solid": "~0.18.0",
+    "comark": "^0.8.1",
+    "eslint-plugin-solid": "~0.18.1",
     "jsdom": "^30.0.1",
-    "solid-js": "^2.0.0-rc.6",
+    "solid-js": "2.0.0-rc.13",
     "typescript": "^7.0.2",
     "vite": "npm:@voidzero-dev/vite-plus-core@0.3.0",
     "vite-plus": "0.3.0"
   },
   "peerDependencies": {
     "@solidjs/web": "^2.0.0-rc.6",
-    "comark": "^0.6.2",
+    "comark": "^0.8.1",
     "solid-js": "^2.0.0-rc.6"
   },
   "devEngines": {