renuel 0.0.19 → 0.0.20-next.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 (2) hide show
  1. package/README.md +20 -21
  2. package/package.json +3 -1
package/README.md CHANGED
@@ -1,12 +1,12 @@
1
1
  <p align="center" id="logos">
2
- <img alt="Renuel" src="https://github.com/renueljs/renuel/raw/latest/.github/logo-light.png" height="384" style="max-width: 100%;">
2
+ <img alt="Renuel" src="https://github.com/renueljs/renuel/raw/v0.0.20-next.1/.github/logo-light.png" height="384" style="max-width: 100%;">
3
3
  </p>
4
4
 
5
5
  <p align="center" id="badges">
6
- <a href="https://github.com/renueljs/renuel/tree/latest"><img src="https://img.shields.io/badge/branch-latest-blue" alt="latest branch"></a>
7
- <a href="https://www.npmjs.com/package/renuel/v/latest"><img src="https://img.shields.io/npm/v/renuel/latest.svg?label=npm&color=blue" alt="npm latest version"></a>
8
- <a href="https://bundlephobia.com/package/renuel@latest"><img src="https://img.shields.io/bundlephobia/minzip/renuel@latest?label=bundle%20size&color=blue" alt="npm latest version bundle size"></a>
9
- <a href="https://github.com/renueljs/renuel/blob/latest/LICENSE"><img src="https://img.shields.io/github/license/renueljs/renuel?color=blue" alt="github latest branch license"></a>
6
+ <a href="https://github.com/renueljs/renuel/tree/v0.0.20-next.1"><img src="https://img.shields.io/badge/tag-v0.0.20--next.1-orange" alt="tag v0.0.20-next.1"></a>
7
+ <a href="https://www.npmjs.com/package/renuel/v/0.0.20-next.1"><img src="https://img.shields.io/badge/npm-v0.0.20--next.1-orange" alt="npm version"></a>
8
+ <a href="https://bundlephobia.com/package/renuel@v0.0.20-next.1"><img src="https://img.shields.io/bundlephobia/minzip/renuel@v0.0.20--next.1?label=bundle%20size&color=orange" alt="npm v0.0.20-next.1 version bundle size"></a>
9
+ <a href="https://github.com/renueljs/renuel/blob/v0.0.20-next.1/LICENSE"><img src="https://img.shields.io/badge/license-MIT-orange" alt="license"></a>
10
10
  </p>
11
11
 
12
12
  <hr>
@@ -37,33 +37,32 @@ npm install renuel # or yarn, pnpm, etc.
37
37
 
38
38
  ## Quick start
39
39
 
40
- Here's a simple example of using Renuel to render a greeting:
40
+ Here's an example of using Renuel to create a simple counter app:
41
41
 
42
42
  <!--prettier-ignore-start-->
43
+ <!--demo-start-->
43
44
  ```typescript
44
- import React from "react";
45
- import ReactDOM from "react-dom/client";
46
- import { div, em$ } from "renuel";
45
+ import { useReducer } from "react";
46
+ import { createRoot } from "react-dom/client";
47
+ import { button, component, strong$ } from "renuel";
47
48
 
48
- const App = () =>
49
- div({ className: "greeting" }, "Hello ", em$("world"));
49
+ const { App$ } = component("App", () => {
50
+ const [count, onClick] = useReducer((x) => x + 1, 0);
51
+ return button({ onClick }, "Count: ", strong$(count));
52
+ });
50
53
 
51
54
  const rootEl = document.getElementById("root");
52
55
  if (rootEl) {
53
- const root = ReactDOM.createRoot(rootEl);
54
- root.render(App());
56
+ const root = createRoot(rootEl);
57
+ root.render(App$());
55
58
  }
56
- ```
57
- <!--prettier-ignore-end-->
58
59
 
59
- This renders:
60
60
 
61
- <!--prettier-ignore-start-->
62
- ```html
63
- <div class="greeting">
64
- Hello <em>world</em>
65
- </div>
61
+
66
62
  ```
63
+
64
+ [![Edit in CodeSandbox](https://codesandbox.io/static/img/play-codesandbox.svg)](https://codesandbox.io/api/v1/sandboxes/define?parameters=N4IgZglgNgpgziAXKAhgBzQOgBYBcC2USoAxgPYB2uMVSIAPAIQAmZJuAnmjAAR6EA%2BADoV6%2FKMIo8eYmCmaTp0%2Bvhi4UPEthQAnOGoC8QkAFUAKgDEAtAA5jPAPSKlKtRoopVRkADcIMAHc0Mh1ce3IqGlxvAIhmXGwDZhg%2FEhgrWPjsABoeCAoIXAgUKCs4EhKYAwBGTAAGeycRJRki3FgBACUaAFcYKB4AERh8MnoHNo7mmQdsOQVp%2BgAjMmYOZ2VmCB885m8dMjIwkAFxrZ8NmXKdCDRcHk5ub1HmHth7OB0Sb0wHfBR8phcHBjKcHNdbrhnOMVmtJONxJIQABfbIgNAoEgAaxQAHMYJgAFZwSjEEARai0RAgYDTYweVTGRA8Yw6Xr9KzJUbGbJ03wwPQQShMlkgWp1eo8vnJCF3IUUEXGboUPoDLlkHhoA6EmDsKVSUX%2FfKKkDoLDifXSYyy4Ei2kGq0gODqUImjFffo8M04AhQYzTVHSmDcCjJCgkfwgpA8e0tYwAAUe8AcbMxx2ZxmqAE5MAAmPOWpQJpNwFNydicsj4E3ZvMFkC8h2i1N66OZnP5hoN6aOlu4SvVttijuS7tN4zutJ%2Bof56oANlHjbjIDZKv6JolEtzdSsFBgAA9cJhqoXHSWSDc7iaAKyYHMAZn9BuRImRKLRwIikFxRJJFDJFJRHQsaiuQ%2BBoNAAoAPJypQUbMiBZ66Pi6aigAogAytu26nqKPT6MMkB7hYIQAMJQCgcBwBY%2FhQMw8EPDofRLkWIAvG8MAmphAByB7HCxjpQBASwigA2j2rGYdhXYCaxgxQQAsrhjryQpmAAJLUDoKBLO8IASQAurJ1pYrcAAywmkXM2IirgTEwMZbGrBx3QklAPRFMKQ5LD0oawDouHGCUUBkAE6ngSERQULiZhwGhh40HA8oMXZzESay8BkFAPgwAAUn%2BCnOXpzKpQ56UgBAbkoNQzCFa8sApfZjkUGQaH4IUtlNeVzo3K2JVdeOIAtSYKr6MwZlsCUjVpYNw2jTAzAAAq6J4agCtNZWzWQFjBQkBw9Li2CkZR8DqRQGGxLgWidX0AYscY%2BQkO5yRieVRoUECUbTAZr7vmxAIfcCAGUJSuB0BAEWhDGPD4TA3SvGkOg8MiPBgAc%2BDNuWxwANwiBDwRQ8AmiptQnSHPcKNo1WmNpgODhPf4VDGLjBSQ%2FcRM%2BbguCULkYHBHuVC5D1lC4gAJMjqPo5ja7TizIgRM60MAIIYOLKMGJoVb81EAAUxgq2gPI8DrACUPAGAIMbTAr9yieQvm4LklDkRA2IGebMP6PDPSIzrOv7mbFs8PuPAANQ8NUuR1CbLPSGyuA9DoUic9zFA60TztCdiyO5MYpFkA7GYNjwwvRaLOv21QJsx6%2BNcKuGcH3AcRxoQMGusCQPSqFQmAoa3IxRAAQhw6nMHrK7k8YdcQGAxvN7grdmyBNs8PPHsXnIpPkzr8%2BL7Hq%2Fk5gq7JDoOsG%2BX1cs2%2ByI30AA)
65
+ <!--demo-end-->
67
66
  <!--prettier-ignore-end-->
68
67
 
69
68
  ## Custom components
package/package.json CHANGED
@@ -1,7 +1,7 @@
1
1
  {
2
2
  "name": "renuel",
3
3
  "description": "Build React UIs without JSX. Type-safe, composable, and 100% JavaScript/TypeScript.",
4
- "version": "0.0.19",
4
+ "version": "0.0.20-next.1",
5
5
  "license": "MIT",
6
6
  "repository": {
7
7
  "type": "git",
@@ -38,8 +38,10 @@
38
38
  "eslint-plugin-unused-imports": "^4.2.0",
39
39
  "global-jsdom": "^26.0.0",
40
40
  "husky": "^8.0.0",
41
+ "lz-string": "^1.5.0",
41
42
  "prettier": "^3.6.2",
42
43
  "react": "^18.0.0",
44
+ "remeda": "^2.32.0",
43
45
  "typescript": "~5.8",
44
46
  "typescript-eslint": "^8.40.0"
45
47
  },