@mrdotb/live-react - npm Package Compare versions

Comparing version 0.1.0 to 0.2.1-beta

assets/js/live_react/hooks.js

@@ -33,4 +33,14 @@ import React from "react";
       this._Component = components[componentName];
-      this._root = ReactDOM.createRoot(this.el);
-      this._render();
+
+      const isSSR = this.el.hasAttribute("data-ssr");
+
+      if (isSSR) {
+        this._root = ReactDOM.hydrateRoot(
+          this.el,
+          React.createElement(this._Component, getProps(this)),
+        );
+      } else {
+        this._root = ReactDOM.createRoot(this.el);
+        this._render();
+      }
     },
@@ -37,0 +47,0 @@ updated() {

package.json

 {
   "name": "@mrdotb/live-react",
-  "version": "0.1.0",
+  "version": "0.2.1-beta",
   "description": "",
@@ -8,3 +8,4 @@ "license": "MIT",
   "exports": {
-    ".": "./assets/js/live_react/index.js"
+    ".": "./assets/js/live_react/index.mjs",
+    "./server": "./assets/js/live_react/server.mjs"
   },
@@ -28,3 +29,3 @@ "author": "Baptiste Chaleil <[e-mail]>",
   },
-  "dependencies": {
+  "peerDependencies": {
     "react": "^18.3.1",
@@ -31,0 +32,0 @@ "react-dom": "^18.3.1"

README.md

@@ -9,14 +9,21 @@ [![Hex.pm](https://img.shields.io/hexpm/v/live_react.svg)](https://hex.pm/packages/live_react)
 
+![logo](https://github.com/mrdotb/live_react/blob/main/logo.svg?raw=true)
+
 ## Features
 
--   ⚡ **End-To-End Reactivity** with LiveView
--   🦄 **Tailwind** Support
--   💀 **Dead View** Support
+- ⚡ **End-To-End Reactivity** with LiveView
+- 🔋 **Server-Side Rendered** (SSR) React
+- 🦄 **Tailwind** Support
+- 💀 **Dead View** Support
+- 🐌 **Lazy-loading** React Components
 
 ## Resources
 
--   [Demo](https://live-react.mrdotb.com/simple)
--   [HexDocs](https://hexdocs.pm/live_react)
--   [HexPackage](https://hex.pm/packages/live_react)
--   [Phoenix LiveView](https://github.com/phoenixframework/phoenix_live_view)
+- [Demo](https://live-react-examples.fly.dev/simple)
+- [HexDocs](https://hexdocs.pm/live_react)
+- [HexPackage](https://hex.pm/packages/live_react)
+- [Phoenix LiveView](https://github.com/phoenixframework/phoenix_live_view)
+- [Development](/guides/development.md)
+- [SSR](/guides/ssr.md)
+- [Deployment](/guides/deployment.md)
 
@@ -38,3 +45,3 @@ ## Why LiveReact
   [
-    {:live_react, "~> 0.1.0"}
+    {:live_react, "~> 0.2.0-beta"}
   ]
@@ -95,3 +102,3 @@ end
   "dependencies": {
-    "live_react": "^0.1.0",
+    "@mrdotb/live-react": "^0.2.0",
     "phoenix": "file:../deps/phoenix",
@@ -101,3 +108,3 @@ "phoenix_html": "file:../deps/phoenix_html",
     "react": "^18.3.1",
-    "react-dom": "^18.3.1",
+    "react-dom": "^18.3.1"
   }
@@ -150,5 +157,13 @@ }
 
+## Examples
+
+Check out the [demo website](https://live-react-examples.fly.dev/simple) on fly.io to see some examples of what you can do with LiveReact.
+
 ## Credits
 
-[LiveVue](https://github.com/Valian/live_vue)
-[LiveSvelte](https://github.com/woutdp/live_svelte)
+I was inspired by the following libraries:
+
+- [LiveVue](https://github.com/Valian/live_vue)
+- [LiveSvelte](https://github.com/woutdp/live_svelte)
+
+I had a need for a similar library for React and so I created LiveReact 👍

No alert changes

Improved metrics

Total package byte prevSize

7960

increased by48.18%

Number of package files

6

increased by50%

Lines of code

74

increased by51.02%

Number of lines in readme file

165

increased by10%

Dependency changes

• - Removedreact@^18.3.1

• - Removedreact-dom@^18.3.1