comark-solid 0.1.0 → 0.1.1

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
Files changed (3) hide show
  1. package/README.md +1 -1
  2. package/dist/index.js +25 -19
  3. package/package.json +3 -3
package/README.md CHANGED
@@ -109,7 +109,7 @@ Use the `:` prefix to pass typed values:
109
109
  ### Slots
110
110
 
111
111
  The default slot is passed as `children`.
112
- Named slots (e.g. `#header`) are passed as camelCase props prefixed with `slot` (`slotHeader`).
112
+ Named slots (e.g. `#header`) are passed as props prefixed with `slot` (`slotHeader`).
113
113
 
114
114
  ```markdown
115
115
  ::card
package/dist/index.js CHANGED
@@ -1,6 +1,6 @@
1
1
  import { Dynamic, className, createComponent, effect, insert, mergeProps, template } from "solid-js/web";
2
2
  import { parseMarkdown } from "comark";
3
- import { isMarkdownDocument, resolveAttributes } from "comark/utils";
3
+ import { isHtmlVoidElement, isMarkdownDocument, pascalCase, resolveAttributes, toNativeAttributes } from "comark/utils";
4
4
  import { Show, Suspense, createMemo, createResource, mergeProps as mergeProps$1 } from "solid-js";
5
5
  //#region src/utils/ast.ts
6
6
  function getTag(node) {
@@ -36,26 +36,33 @@ function toElementNode(node) {
36
36
  node
37
37
  };
38
38
  }
39
- const VOID_ELEMENTS = /* @__PURE__ */ new Set([
40
- "hr",
41
- "br",
42
- "img"
43
- ]);
44
39
  function resolveProps(node, renderData) {
45
40
  return resolveAttributes(getAttributes(node), renderData, { parseJson: true });
46
41
  }
42
+ function scopeRenderData(node, props, renderData) {
43
+ return Object.keys(getAttributes(node)).some((key) => key !== "$") ? {
44
+ ...renderData,
45
+ props
46
+ } : renderData;
47
+ }
47
48
  function getSlotName(node) {
48
49
  if (getTag(node) !== "template") return null;
49
50
  const props = getAttributes(node);
50
- if (typeof props.name !== "string" || props.name.trim() === "") return null;
51
- return props.name.trim();
51
+ const name = props.name || Object.keys(props).find((key) => key.startsWith("#"))?.slice(1);
52
+ if (typeof name !== "string" || name.trim() === "") return null;
53
+ return name.trim();
52
54
  }
53
55
  function getSlotPropName(slotName) {
54
56
  if (slotName === "default") return "children";
55
57
  return `slot${slotName.charAt(0).toUpperCase() + slotName.slice(1)}`;
56
58
  }
57
59
  function resolveComponent(element, components) {
58
- const component = components[element.tag];
60
+ function lookup(tag) {
61
+ const name = pascalCase(tag);
62
+ return components[`Prose${name}`] || components[name] || components[tag];
63
+ }
64
+ const as = getAttributes(element.node).as;
65
+ const component = typeof as === "string" && lookup(as) || lookup(element.tag);
59
66
  if (!component) return null;
60
67
  return {
61
68
  ...element,
@@ -77,10 +84,7 @@ function createNodeRenderer(components) {
77
84
  function renderCustomComponent(element, context) {
78
85
  const { component, node } = element;
79
86
  const props = resolveProps(node, context.renderData);
80
- const slots = partitionIntoSlots(node, Object.keys(props).length > 0 ? {
81
- ...context.renderData,
82
- props
83
- } : context.renderData);
87
+ const slots = partitionIntoSlots(node, scopeRenderData(node, props, context.renderData));
84
88
  return createComponent(Suspense, {
85
89
  fallback: null,
86
90
  get children() {
@@ -90,11 +94,13 @@ function createNodeRenderer(components) {
90
94
  }
91
95
  function renderNativeElement(element, context) {
92
96
  const { tag, node } = element;
93
- const props = resolveProps(node, context.renderData);
94
- if (VOID_ELEMENTS.has(tag)) return createComponent(Dynamic, mergeProps({ component: tag }, props));
95
- const children = getChildren(node).map((child) => renderNode(child, {
96
- ...context,
97
- parent: node
97
+ const resolved = resolveProps(node, context.renderData);
98
+ const props = toNativeAttributes(tag, node, resolved);
99
+ const renderData = scopeRenderData(node, resolved, context.renderData);
100
+ if (isHtmlVoidElement(tag)) return createComponent(Dynamic, mergeProps({ component: tag }, props));
101
+ const children = getChildren(node).filter((child) => !getSlotName(child)).map((child) => renderNode(child, {
102
+ parent: node,
103
+ renderData
98
104
  })).filter(Boolean);
99
105
  return createComponent(Dynamic, mergeProps({ component: tag }, props, { children }));
100
106
  }
@@ -107,7 +113,7 @@ function createNodeRenderer(components) {
107
113
  if (slotName) {
108
114
  const propName = getSlotPropName(slotName);
109
115
  namedSlots[propName] = getChildren(child).map((slotChild) => renderNode(slotChild, {
110
- parent: child,
116
+ parent: node,
111
117
  renderData: childRenderData
112
118
  })).filter(Boolean);
113
119
  continue;
package/package.json CHANGED
@@ -1,6 +1,6 @@
1
1
  {
2
2
  "name": "comark-solid",
3
- "version": "0.1.0",
3
+ "version": "0.1.1",
4
4
  "description": "Solid renderer for Comark.",
5
5
  "keywords": [
6
6
  "comark",
@@ -37,7 +37,7 @@
37
37
  "@solidjs/testing-library": "^0.8.10",
38
38
  "@testing-library/jest-dom": "^7.0.1",
39
39
  "bumpp": "^11.1.0",
40
- "comark": "^0.6.2",
40
+ "comark": "^0.8.1",
41
41
  "eslint-plugin-solid": "~0.18.0",
42
42
  "jsdom": "^30.0.1",
43
43
  "solid-js": "^1.9.15",
@@ -47,7 +47,7 @@
47
47
  "vite-plus": "0.3.0"
48
48
  },
49
49
  "peerDependencies": {
50
- "comark": "^0.6.2",
50
+ "comark": "^0.8.1",
51
51
  "solid-js": "^1.9.0"
52
52
  },
53
53
  "devEngines": {