@astrojs/solid-js - npm Package Compare versions

Comparing version 0.1.4 to 0.2.0

CHANGELOG.md

		# @astrojs/solid-js

		## 0.2.0

		### Minor Changes

		- [#3652](https://github.com/withastro/astro/pull/3652) [`7373d61c`](https://github.com/withastro/astro/commit/7373d61cdcaedd64bf5fd60521b157cfa4343558) Thanks [@natemoo-re](https://github.com/natemoo-re)! - Add support for passing named slots from `.astro` => framework components.

		Each `slot` is be passed as a top-level prop. For example:

		```jsx
		// From .astro
		<Component>
		<h2 slot="title">Hello world!</h2>
		<h2 slot="slot-with-dash">Dash</h2>
		<div>Default</div>
		</Component>;

		// For .jsx
		export default function Component({ title, slotWithDash, children }) {
		return (
		<>
		<div id="title">{title}</div>
		<div id="slot-with-dash">{slotWithDash}</div>
		<div id="main">{children}</div>
		</>
		);
		}
		```

		## 0.1.4
		@@ -4,0 +32,0 @@

client.js

		@@ -5,3 +5,3 @@ import { sharedConfig } from 'solid-js';
		export default (element) =>
		(Component, props, childHTML, { client }) => {
		(Component, props, slotted, { client }) => {
		// Prepare global object expected by Solid's hydration logic
		@@ -15,4 +15,20 @@ if (!window._$HY) {

		// Perform actual hydration
		let children;
		let _slots = {};
		if (Object.keys(slotted).length > 0) {
		// hydrating
		if (sharedConfig.context) {
		element.querySelectorAll('astro-slot').forEach((slot) => {
		_slots[slot.getAttribute('name') \|\| 'default'] = slot.cloneNode(true);
		});
		} else {
		for (const [key, value] of Object.entries(slotted)) {
		_slots[key] = document.createElement('astro-slot');
		if (key !== 'default') _slots[key].setAttribute('name', key);
		_slots[key].innerHTML = value;
		}
		}
		}

		const { default: children, ...slots } = _slots;

		fn(
		@@ -22,16 +38,4 @@ () =>
		...props,
		get children() {
		if (childHTML != null) {
		// hydrating
		if (sharedConfig.context) {
		children = element.querySelector('astro-fragment');
		}

		if (children == null) {
		children = document.createElement('astro-fragment');
		children.innerHTML = childHTML;
		}
		}
		return children;
		},
		...slots,
		children,
		}),
		@@ -38,0 +42,0 @@ element

package.json

		{
		"name": "@astrojs/solid-js",
		"version": "0.1.4",
		"version": "0.2.0",
		"description": "Use Solid components within Astro",
		@@ -32,3 +32,3 @@ "type": "module",
		"devDependencies": {
		"astro": "1.0.0-beta.39",
		"astro": "1.0.0-beta.54",
		"astro-scripts": "0.0.4",
		@@ -35,0 +35,0 @@ "solid-js": "^1.4.3"

server.js

		import { renderToString, ssr, createComponent } from 'solid-js/web';

		const slotName = (str) => str.trim().replace(/[-_]([a-z])/g, (_, w) => w.toUpperCase());

		function check(Component, props, children) {
		@@ -9,14 +11,17 @@ if (typeof Component !== 'function') return false;

		function renderToStaticMarkup(Component, props, children) {
		const html = renderToString(() =>
		createComponent(Component, {
		...props,
		// In Solid SSR mode, `ssr` creates the expected structure for `children`.
		// In Solid client mode, `ssr` is just a stub.
		children: children != null ? ssr(`<astro-fragment>${children}</astro-fragment>`) : children,
		})
		);
		return {
		html: html,
		function renderToStaticMarkup(Component, props, { default: children, ...slotted }) {
		const slots = {};
		for (const [key, value] of Object.entries(slotted)) {
		const name = slotName(key);
		slots[name] = ssr(`<astro-slot name="${name}">${value}</astro-slot>`);
		}
		// Note: create newProps to avoid mutating `props` before they are serialized
		const newProps = {
		...props,
		...slots,
		// In Solid SSR mode, `ssr` creates the expected structure for `children`.
		children: children != null ? ssr(`<astro-slot>${children}</astro-slot>`) : children,
		};
		const html = renderToString(() => createComponent(Component, newProps));
		return { html };
		}
		@@ -23,0 +28,0 @@

static-html.js

Improved metrics