@shineuix/react 1.0.0 → 1.0.1

package/README.md

@@ -10,7 +10,7 @@ npm i @shineuix/core @shineuix/react
 import { SuiButton, SuiInputText } from '@shineuix/react';
 import '@shineuix/core/shineui.css';
 
-<SuiButton variant="accent" label="Pay bills" onClick={pay} />
+<SuiButton variant="accent" label="Record payment" onClick={recordPayment} />
 <SuiInputText label="Customer email" required onSuiChange={(e) => save(e.detail)} />
 ```
 

package/dist/runtime.d.ts

@@ -1,7 +1,8 @@
 /*!
  * Vendored from @stencil/react-output-target 1.6.2, src/runtime/create-component.ts.
  * The MIT License (MIT). Copyright (c) 2019-present Drifty Co.
- * Changed here: the wrapper renders nothing on the server and during hydration (useClientRender).
+ * Changed here: the wrapper renders nothing on the server and during hydration (useClientRender),
+ * and `slot` is written when React creates the element (beforeInsert).
  */
 import type { EventName, Options } from '@lit/react';
 import React from 'react';

package/dist/runtime.js

@@ -1,7 +1,8 @@
 /*!
  * Vendored from @stencil/react-output-target 1.6.2, src/runtime/create-component.ts.
  * The MIT License (MIT). Copyright (c) 2019-present Drifty Co.
- * Changed here: the wrapper renders nothing on the server and during hydration (useClientRender).
+ * Changed here: the wrapper renders nothing on the server and during hydration (useClientRender),
+ * and `slot` is written when React creates the element (beforeInsert).
  */
 import { createComponent as createComponentWrapper } from '@lit/react';
 import React from 'react';
@@ -39,12 +40,32 @@ const subscribeNever = () => () => { };
  * its first render.
  */
 const useClientRender = () => React.useSyncExternalStore(subscribeNever, () => true, () => false);
+/**
+ * Props React has to write when it creates the element, before it inserts it anywhere.
+ *
+ * @lit/react sets every prop the element's prototype knows as a property in a layout effect, after
+ * React has inserted the element. That is too late for `slot`. A ShineUI element draws in its own
+ * light DOM, and it files a child under a slot when the child is inserted, as a shadow host would
+ * on assignment. A `SuiButton slot="actions"` that React adds to a rendered page header arrived
+ * with no slot, went to the default slot (the title) and stayed there when its slot came a moment
+ * later. On the first render it happened to work, because the header draws after the effect.
+ * Hiding these names from the prototype check makes @lit/react hand them to React, which writes
+ * them while it creates the element.
+ */
+const beforeInsert = new Set(['slot']);
+function withAttributesFirst(elementClass) {
+    // A server import may hand over no class at all; @lit/react reads it only in a client render.
+    if (!elementClass || typeof elementClass.prototype !== 'object' || typeof Proxy === 'undefined')
+        return elementClass;
+    const prototype = new Proxy(elementClass.prototype, { has: (target, key) => !beforeInsert.has(key) && Reflect.has(target, key) });
+    return { name: elementClass.name, prototype };
+}
 export const createComponent = ({ defineCustomElement, tagName, transformTag, ...options }) => {
     if (typeof defineCustomElement !== 'undefined') {
         defineCustomElement();
     }
     const finalTagName = transformTag ? transformTag(tagName) : tagName;
-    const ReactComponent = createComponentWrapper({ ...options, tagName: finalTagName });
+    const ReactComponent = createComponentWrapper({ ...options, elementClass: withAttributesFirst(options.elementClass), tagName: finalTagName });
     const WrappedComponent = React.forwardRef((props, ref) => {
         const { className, class: classProp, ...restProps } = props;
         const incomingClassName = className ?? classProp ?? '';

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@shineuix/react",
-  "version": "1.0.0",
+  "version": "1.0.1",
   "description": "React bindings for ShineUI web components.",
   "license": "MIT",
   "keywords": [
@@ -34,7 +34,7 @@
   ],
   "dependencies": {
     "@lit/react": "^1.0.8",
-    "@shineuix/core": "1.0.0"
+    "@shineuix/core": "1.0.1"
   },
   "peerDependencies": {
     "react": "^18 || ^19",
@@ -56,6 +56,11 @@
   "publishConfig": {
     "access": "public"
   },
+  "repository": {
+    "type": "git",
+    "url": "git+https://github.com/smallandsimple/shineui.git",
+    "directory": "packages/react"
+  },
   "scripts": {
     "build": "tsc -p tsconfig.json && node scripts/vendor-runtime.mjs"
   }