comark-solid 0.0.1

package/README.md

@@ -0,0 +1,142 @@
+# comark-solid
+
+Solid renderer for [Comark](https://comark.dev).
+
+## Installation
+
+```bash
+npm install comark-solid comark
+```
+
+## `<Markdown>`
+
+Parses Markdown strings and renders them directly.
+
+```tsx
+import { Markdown } from "comark-solid";
+
+const markdown = "# Hello World";
+
+export default function App() {
+  return <Markdown value={markdown} />;
+}
+```
+
+### Props
+
+| Prop         | Type                             | Default      | Description                                                                        |
+| :----------- | :------------------------------- | :----------- | :--------------------------------------------------------------------------------- |
+| `value`      | `string \| MarkdownDocument`     | _(Required)_ | Markdown string or pre-parsed document.                                            |
+| `options`    | `ParserOptions`                  | `undefined`  | Options passed to `parseMarkdown` (ignored if `value` is a `MarkdownDocument`).    |
+| `components` | `Record<string, ValidComponent>` | `{}`         | Map of AST node names to Solid components.                                         |
+| `data`       | `Record<string, unknown>`        | `{}`         | Runtime values referenced from markdown via `:prop="data.path"`.                   |
+| `class`      | `string`                         | `undefined`  | Additional class name for the wrapper `div` (`comark-content` is always included). |
+
+## `<MarkdownDocument>`
+
+Renders a pre-parsed `MarkdownDocument` AST without invoking the parser. Ideal for server-side rendering (SSR), static site generation, or pre-compiled content.
+
+```tsx
+import { parseMarkdown } from "comark";
+import { MarkdownDocument } from "comark-solid";
+
+const document = await parseMarkdown("# Hello World");
+
+export default function App() {
+  return <MarkdownDocument value={document} />;
+}
+```
+
+### Props
+
+| Prop         | Type                             | Default      | Description                                                                        |
+| :----------- | :------------------------------- | :----------- | :--------------------------------------------------------------------------------- |
+| `value`      | `MarkdownDocument`               | _(Required)_ | Pre-parsed Comark document AST.                                                    |
+| `components` | `Record<string, ValidComponent>` | `{}`         | Map of AST node names to Solid components.                                         |
+| `data`       | `Record<string, unknown>`        | `{}`         | Runtime values referenced from markdown via `:prop="data.path"`.                   |
+| `class`      | `string`                         | `undefined`  | Additional class name for the wrapper `div` (`comark-content` is always included). |
+
+## Custom Components
+
+Map tag to Solid components via the `components` prop:
+
+```tsx
+import { Markdown } from "comark-solid";
+import { Card } from "./Card";
+import { CustomHeading } from "./CustomHeading";
+
+const components = {
+  h1: CustomHeading,
+  card: Card,
+};
+
+export default function App() {
+  return <Markdown value={markdown} components={components} />;
+}
+```
+
+Components can also be loaded asynchronously using Solid's `lazy()`:
+
+```tsx
+import { lazy } from "solid-js";
+
+const components = {
+  chart: lazy(() => import("./Chart")),
+};
+```
+
+## Component bindings
+
+### Props
+
+Attributes in Comark syntax are passed as props to your component.
+Use the `:` prefix to pass typed values:
+
+| Markdown                    | Prop value                |
+| :-------------------------- | :------------------------ |
+| `{type="warning"}`          | `"warning"` (string)      |
+| `{:count="5"}`              | `5` (number)              |
+| `{:active=true}`            | `true` (boolean)          |
+| `{:config='{"key":"val"}'}` | `{ key: "val" }` (object) |
+
+### Slots
+
+The default slot is passed as `children`.
+Named slots (e.g. `#header`) are passed as camelCase props prefixed with `slot` (`slotHeader`).
+
+```markdown
+::card
+#header
+Header content
+
+#default
+Body content
+::
+```
+
+```tsx
+interface CardProps {
+  slotHeader?: JSX.Element;
+  children?: JSX.Element;
+}
+
+export default function Card(props: CardProps) {
+  return (
+    <div>
+      <Show when={props.slotHeader}>{(header) => <div>{header}</div>}</Show>
+      <div>{props.children}</div>
+    </div>
+  );
+}
+```
+
+## Acknowledgements
+
+This project is heavily based on the official [Comark React renderer](https://github.com/ComarkDev/comark/tree/main/packages/react),
+adapted for Solid's component model and APIs.
+
+The original implementation is licensed under the MIT License.
+
+## License
+
+MIT

package/dist/index.d.ts

@@ -0,0 +1,128 @@
+import { MarkdownDocument as MarkdownDocument$1, ParserOptions } from "comark";
+import { Component, ValidComponent } from "solid-js";
+//#region src/components/MarkdownDocument.d.ts
+interface MarkdownDocumentProps {
+  /**
+   * The parsed Comark document to render.
+   */
+  value: MarkdownDocument$1;
+  /**
+   * Maps element tags to Solid components.
+   *
+   * When an element matches a key in this object, the corresponding
+   * component is rendered instead of the native element.
+   *
+   * @default `{}`
+   */
+  components?: Record<string, ValidComponent>;
+  /**
+   * Runtime values referenced from markdown via `:prop="data.path"`.
+   *
+   * @default `{}`
+   */
+  data?: Record<string, unknown>;
+  /**
+   * Additional class for the wrapper div.
+   *
+   *  The `comark-content` class is always included.
+   *
+   * @default undefined
+   */
+  class?: string;
+}
+/**
+ * Renders a parsed Markdown document using Solid components.
+ *
+ * Supports custom components mapping for element tags.
+ *
+ * The wrapper element is assigned the `comark-content` class by default.
+ *
+ * @example
+ * ```tsx
+ * import { MarkdownDocument } from "comark-solid";
+ * import { lazy } from "solid-js";
+ * import { CustomHeading } from "./CustomHeading";
+ *
+ * const components = {
+ *   h1: CustomHeading,
+ *   lazyCard: lazy(() => import("./Card")),
+ * }
+ *
+ * export default function App() {
+ *  return <MarkdownDocument value={document} components={components} />;
+ *  }
+ *  ```
+ */
+declare const MarkdownDocument: Component<MarkdownDocumentProps>;
+//#endregion
+//#region src/components/Markdown.d.ts
+interface MarkdownProps extends Omit<MarkdownDocumentProps, "value"> {
+  /**
+   * Markdown source or an already-parsed Comark document.
+   */
+  value: string | MarkdownDocument$1;
+  /**
+   * Options passed to the Comark Markdown parser.
+   *
+   * Ignored when `value` is an already-parsed document.
+   *
+   * @default undefined
+   */
+  options?: ParserOptions;
+  /**
+   * Maps element tags to Solid components.
+   *
+   * When an element matches a key in this object, the corresponding
+   * component is rendered instead of the native element.
+   *
+   * @default `{}`
+   */
+  components?: Record<string, ValidComponent>;
+  /**
+   * Runtime values referenced from markdown via `:prop="data.path"`.
+   *
+   * @default `{}`
+   */
+  data?: Record<string, unknown>;
+  /**
+   * Additional class for the wrapper div.
+   *
+   *  The `comark-content` class is always included.
+   *
+   * @default undefined
+   */
+  class?: string;
+}
+/**
+ * Markdown component
+ *
+ * Renders a Markdown string or an already-parsed Comark document using Solid components.
+ * Markdown strings are parsed on the client before rendering.
+ *
+ * Supports custom component mapping for element tags.
+ *
+ * @example
+ * ```tsx
+ * import { Markdown } from "comark-solid";
+ * import { Loading } from "solid-js";
+ * import { CustomHeading } from "./CustomHeading";
+ *
+ * const components = {
+ *   h1: CustomHeading,
+ * };
+ *
+ * export default function App() {
+ *   return (
+ *     <Loading fallback={<div>Loading...</div>}>
+ *       <Markdown
+ *         value={source}
+ *         components={components}
+ *       />
+ *     </Loading>
+ *   );
+ * }
+ * ```
+ */
+declare const Markdown: Component<MarkdownProps>;
+//#endregion
+export { Markdown, MarkdownDocument, type MarkdownDocumentProps, type MarkdownProps };

package/dist/index.js

@@ -0,0 +1,239 @@
+import { className, createComponent, dynamic, effect, insert, mergeProps, template } from "@solidjs/web";
+import { parseMarkdown } from "comark";
+import { isMarkdownDocument, resolveAttributes } from "comark/utils";
+import { Loading, createMemo } from "solid-js";
+//#region src/utils/ast.ts
+function getTag(node) {
+	if (Array.isArray(node) && node.length >= 1 && typeof node[0] === "string") return node[0];
+	return null;
+}
+function getAttributes(node) {
+	if (Array.isArray(node) && node.length >= 2) return node[1] || {};
+	return {};
+}
+function getChildren(node) {
+	if (Array.isArray(node) && node.length > 2) return node.slice(2);
+	return [];
+}
+//#endregion
+//#region src/components/MarkdownDocument.tsx
+var _tmpl$ = /*#__PURE__*/ template(`<div>`);
+const DEFAULT_LOCAL_CONTEXT = {
+	parent: void 0,
+	renderData: {
+		frontmatter: {},
+		meta: {},
+		data: {},
+		props: {}
+	}
+};
+function toElementNode(node) {
+	if (typeof node === "string") return null;
+	const tag = getTag(node);
+	if (!tag) return null;
+	return {
+		tag,
+		node
+	};
+}
+const VOID_ELEMENTS = /* @__PURE__ */ new Set([
+	"hr",
+	"br",
+	"img"
+]);
+function resolveProps(node, renderData) {
+	return resolveAttributes(getAttributes(node), renderData, { parseJson: true });
+}
+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();
+}
+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];
+	if (!component) return null;
+	return {
+		...element,
+		component
+	};
+}
+function createNodeRenderer(components) {
+	function renderNode(node, local = {}) {
+		if (typeof node === "string") return node;
+		const element = toElementNode(node);
+		if (!element) return null;
+		const context = {
+			...DEFAULT_LOCAL_CONTEXT,
+			...local
+		};
+		const component = context.parent !== void 0 && toElementNode(context.parent)?.tag === "pre" ? null : resolveComponent(element, components);
+		return component ? renderCustomComponent(component, context) : renderNativeElement(element, context);
+	}
+	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 CustomComponent = dynamic(() => component);
+		return createComponent(Loading, {
+			fallback: null,
+			get children() {
+				return createComponent(CustomComponent, mergeProps(props, slots));
+			}
+		});
+	}
+	function renderNativeElement(element, context) {
+		const { tag, node } = element;
+		const props = resolveProps(node, 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
+		})).filter(Boolean);
+		return createComponent(Component, mergeProps(props, { children }));
+	}
+	function partitionIntoSlots(node, childRenderData) {
+		const defaultSlot = [];
+		const namedSlots = {};
+		for (const child of getChildren(node)) {
+			if (child === void 0 || child === null) continue;
+			const slotName = getSlotName(child);
+			if (slotName) {
+				const propName = getSlotPropName(slotName);
+				namedSlots[propName] = getChildren(child).map((slotChild) => renderNode(slotChild, {
+					parent: child,
+					renderData: childRenderData
+				})).filter(Boolean);
+				continue;
+			}
+			const rendered = renderNode(child, {
+				parent: node,
+				renderData: childRenderData
+			});
+			if (rendered) defaultSlot.push(rendered);
+		}
+		return defaultSlot.length > 0 ? {
+			...namedSlots,
+			children: defaultSlot
+		} : namedSlots;
+	}
+	return renderNode;
+}
+/**
+* Renders a parsed Markdown document using Solid components.
+
+*
+* Supports custom components mapping for element tags.
+*
+* The wrapper element is assigned the `comark-content` class by default.
+*
+* @example
+* ```tsx
+* import { MarkdownDocument } from "comark-solid";
+* import { lazy } from "solid-js";
+* import { CustomHeading } from "./CustomHeading";
+*
+* const components = {
+*   h1: CustomHeading,
+*   lazyCard: lazy(() => import("./Card")),
+* }
+*
+* export default function App() {
+*  return <MarkdownDocument value={document} components={components} />;
+*  }
+*  ```
+*/
+const MarkdownDocument = (_props) => {
+	const props = mergeProps({
+		components: {},
+		data: {},
+		class: void 0
+	}, _props);
+	const renderedNodes = createMemo(() => {
+		const renderNode = createNodeRenderer(props.components);
+		const document = props.value;
+		const renderData = {
+			frontmatter: document.frontmatter,
+			meta: document.meta,
+			data: props.data,
+			props: {}
+		};
+		return document.nodes.map((node) => renderNode(node, {
+			parent: void 0,
+			renderData
+		})).filter(Boolean);
+	});
+	const wrapperClass = createMemo(() => ["comark-content", props.class].map((cls) => cls?.trim()).filter(Boolean).join(" "));
+	var _el$ = _tmpl$();
+	insert(_el$, renderedNodes);
+	effect(() => wrapperClass(), (_v$, _$p) => {
+		className(_el$, _v$, _$p);
+	});
+	return _el$;
+};
+//#endregion
+//#region src/components/Markdown.tsx
+/**
+* Markdown component
+*
+* Renders a Markdown string or an already-parsed Comark document using Solid components.
+* Markdown strings are parsed on the client before rendering.
+*
+* Supports custom component mapping for element tags.
+*
+* @example
+* ```tsx
+* import { Markdown } from "comark-solid";
+* import { Loading } from "solid-js";
+* import { CustomHeading } from "./CustomHeading";
+*
+* const components = {
+*   h1: CustomHeading,
+* };
+*
+* export default function App() {
+*   return (
+*     <Loading fallback={<div>Loading...</div>}>
+*       <Markdown
+*         value={source}
+*         components={components}
+*       />
+*     </Loading>
+*   );
+* }
+* ```
+*/
+const Markdown = (_props) => {
+	const props = mergeProps({
+		components: {},
+		data: {}
+	}, _props);
+	const document = createMemo(() => {
+		const value = props.value;
+		return isMarkdownDocument(value) ? value : parseMarkdown(value, props.options);
+	});
+	return createComponent(MarkdownDocument, {
+		get value() {
+			return document();
+		},
+		get components() {
+			return props.components;
+		},
+		get data() {
+			return props.data;
+		},
+		get ["class"]() {
+			return props.class;
+		}
+	});
+};
+//#endregion
+export { Markdown, MarkdownDocument };

package/package.json

@@ -0,0 +1,58 @@
+{
+  "name": "comark-solid",
+  "version": "0.0.1",
+  "description": "Solid renderer for Comark.",
+  "keywords": [
+    "comark",
+    "markdown",
+    "solid",
+    "solidjs"
+  ],
+  "homepage": "https://github.com/shiguri-01/my-comark#readme",
+  "bugs": {
+    "url": "https://github.com/shiguri-01/my-comark/issues"
+  },
+  "license": "MIT",
+  "author": {
+    "name": "shiguri",
+    "url": "https://github.com/shiguri-01"
+  },
+  "files": [
+    "dist"
+  ],
+  "type": "module",
+  "types": "./dist/index.d.ts",
+  "exports": {
+    ".": "./dist/index.js",
+    "./package.json": "./package.json"
+  },
+  "publishConfig": {
+    "access": "public"
+  },
+  "scripts": {
+    "build": "vp pack",
+    "dev": "vp pack --watch",
+    "test": "vp test",
+    "check": "vp check",
+    "prepublishOnly": "vp run build"
+  },
+  "devDependencies": {
+    "@solidjs/testing-library": "catalog:",
+    "@solidjs/web": "catalog:",
+    "@testing-library/jest-dom": "catalog:",
+    "@types/node": "^26.1.1",
+    "bumpp": "^11.1.0",
+    "comark": "catalog:",
+    "jsdom": "catalog:",
+    "solid-js": "catalog:",
+    "typescript": "^7.0.2",
+    "unplugin-solid": "catalog:",
+    "vite": "catalog:",
+    "vite-plus": "catalog:"
+  },
+  "peerDependencies": {
+    "@solidjs/web": "catalog:",
+    "comark": "catalog:",
+    "solid-js": "catalog:"
+  }
+}