@astrojs/solid-js - npm Package Compare versions

Comparing version 0.0.3 to 0.0.4-beta.0

CHANGELOG.md

 # @astrojs/solid-js
 
+## 0.0.4-beta.0
+
+### Patch Changes
+
+- [#3003](https://github.com/withastro/astro/pull/3003) [`13b782f4`](https://github.com/withastro/astro/commit/13b782f421871af36978f29154c715c66739d475) Thanks [@ryansolid](https://github.com/ryansolid)! - Improve nested hydration with Solid
+
 ## 0.0.3
@@ -4,0 +10,0 @@

client.js

@@ -0,1 +1,2 @@
+import { sharedConfig } from 'solid-js';
 import { hydrate, createComponent } from 'solid-js/web';
@@ -5,11 +6,21 @@
 	let children;
-	if (childHTML != null) {
-		children = document.createElement('astro-fragment');
-		children.innerHTML = childHTML;
-	}
+	hydrate(
+		() =>
+			createComponent(Component, {
+				...props,
+				get children() {
+					if (childHTML != null) {
+						// hydrating
+						if (sharedConfig.context) children = element.querySelector('astro-fragment');
 
-	// Using Solid's `hydrate` method ensures that a `root` is created
-	// in order to properly handle reactivity. It also handles
-	// components that are not native HTML elements.
-	hydrate(() => createComponent(Component, { ...props, children }), element);
+						if (children == null) {
+							children = document.createElement('astro-fragment');
+							children.innerHTML = childHTML;
+						}
+					}
+					return children;
+				},
+			}),
+		element
+	);
 };

package.json

 {
   "name": "@astrojs/solid-js",
-  "version": "0.0.3",
+  "version": "0.0.4-beta.0",
   "description": "Use Solid components within Astro",
@@ -28,2 +28,7 @@ "type": "module",
   },
+  "scripts": {
+    "build": "astro-scripts build \"src/**/*.ts\" && tsc",
+    "build:ci": "astro-scripts build \"src/**/*.ts\"",
+    "dev": "astro-scripts dev \"src/**/*.ts\""
+  },
   "dependencies": {
@@ -33,4 +38,4 @@ "babel-preset-solid": "^1.3.13"
   "devDependencies": {
-    "astro": "0.25.1",
-    "astro-scripts": "0.0.2",
+    "astro": "workspace:*",
+    "astro-scripts": "workspace:*",
     "solid-js": "^1.3.13"
@@ -43,9 +48,3 @@ },
     "node": "^14.15.0 || >=16.0.0"
-  },
-  "scripts": {
-    "build": "astro-scripts build \"src/**/*.ts\" && tsc",
-    "build:ci": "astro-scripts build \"src/**/*.ts\"",
-    "dev": "astro-scripts dev \"src/**/*.ts\""
-  },
-  "readme": "# @astrojs/solid-js 💙\n\nThis **[Astro integration][astro-integration]** enables server-side rendering and client-side hydration for your [SolidJS](https://www.solidjs.com/) components.\n\n## Installation\n\nThere are two ways to add integrations to your project. Let's try the most convenient option first!\n\n### (experimental) `astro add` command\n\nAstro includes a CLI tool for adding first party integrations: `astro add`. This command will:\n1. (Optionally) Install all necessary dependencies and peer dependencies\n2. (Also optionally) Update your `astro.config.*` file to apply this integration\n\nTo install `@astrojs/solid-js`, run the following from your project directory and follow the prompts:\n\n```sh\n# Using NPM\nnpx astro add solid\n# Using Yarn\nyarn astro add solid\n# Using PNPM\npnpx astro add solid\n```\n\nIf you run into any hiccups, [feel free to log an issue on our GitHub](https://github.com/withastro/astro/issues) and try the manual installation steps below.\n\n### Install dependencies manually\n\nFirst, install the `@astrojs/solid-js` integration like so:\n\n```\nnpm install @astrojs/solid-js\n```\n\nMost package managers will install associated peer dependencies as well. Still, if you see a \"Cannot find package 'solid-js'\" (or similar) warning when you start up Astro, you'll need to install SolidJS:\n\n```sh\nnpm install solid-js\n```\n\nNow, apply this integration to your `astro.config.*` file using the `integrations` property:\n\n__astro.config.mjs__\n\n```js\nimport solid from '@astrojs/solid-js';\n\nexport default {\n  // ...\n  integrations: [solid()],\n}\n```\n\n## Getting started\n\nTo use your first SolidJS component in Astro, head to our [UI framework documentation][astro-ui-frameworks]. You'll explore:\n- 📦 how framework components are loaded,\n- 💧 client-side hydration options, and\n- 🪆 opportunities to mix and nest frameworks together\n\nAlso check our [Astro Integration Documentation][astro-integration] for more on integrations.\n\n[astro-integration]: https://docs.astro.build/en/guides/integrations-guide/\n[astro-ui-frameworks]: https://docs.astro.build/en/core-concepts/framework-components/#using-framework-components\n"
-}
+  }
+}

server.js

@@ -22,3 +22,5 @@ import { renderToString, ssr, createComponent } from 'solid-js/web';
 	);
-	return { html: html + `<script>window._$HY||(_$HY={events:[],completed:new WeakSet,r:{}})</script>` };
+	return {
+		html: html + `<script>window._$HY||(_$HY={events:[],completed:new WeakSet,r:{}})</script>`,
+	};
 }
@@ -25,0 +27,0 @@

No alert changes

Improved metrics

Total package byte prevSize

14908

increased by5.61%

Lines of code

173

increased by8.13%

No dependency changes