ranui 0.1.2 → 0.1.3

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "ranui",
-  "version": "0.1.2",
+  "version": "0.1.3",
   "description": "UI Component library based on `Web Component`",
   "main": "dist/index.umd.cjs",
   "module": "dist/index.js",
@@ -24,14 +24,6 @@
     "type": "git",
     "url": "git+https://github.com/chaxus/ran/tree/main/packages/ranui"
   },
-  "scripts": {
-    "dev": "vite",
-    "build": "vite build",
-    "prepublish": "npm run build",
-    "test": "sh ./bin/test.sh",
-    "test:report": "playwright show-report",
-    "test:ui": "playwright test --ui"
-  },
   "keywords": [
     "ran",
     "component",
@@ -50,7 +42,7 @@
     "@types/tinycolor2": "^1.4.3",
     "less": "^4.1.3",
     "prettier": "^2.8.1",
-    "ranuts": "workspace:0.1.0-alpha.7",
+    "ranuts": "0.1.0-alpha.7",
     "svgo": "^3.0.0",
     "vite": "^4.4.9",
     "vite-plugin-dts": "^3.5.2"
@@ -63,5 +55,13 @@
     "lodash": "^4.17.21",
     "tinycolor2": "^1.6.0",
     "x-data-spreadsheet": "^1.1.9"
+  },
+  "scripts": {
+    "dev": "vite",
+    "build": "vite build",
+    "prepublish": "npm run build",
+    "test": "sh ./bin/test.sh",
+    "test:report": "playwright show-report",
+    "test:ui": "playwright test --ui"
   }
-}
+}

package/readme.md

@@ -12,9 +12,9 @@ UI Component library based on `Web Component`
 
 ## Feature
 
-- **Across the frame**: It works with react, vue, or native projects.
-- **Componentization**: The shadow dom actually implements componentization of style and functionality.
-- **native**: A component is like using a div tag.
+- **Across the frame**: It works with `react`, `vue`, or native projects.
+- **Componentization**: The `shadow dom` actually implements componentization of style and functionality.
+- **native**: A component is like using a `div`tag.
 
 ## Install
 
@@ -32,21 +32,17 @@ npm install ranui --save
 
 It is based on the `Web Component`, you can use it without focusing on the framework.
 
-- tsx
-
-```tsx
-import Button from 'ranui'
+In most cases, you can use it just like a native `div` tag
 
-const App = () => {
-  return (
-    <>
-      <r-button>Button</r-button>
-    </>
-  )
-}
-```
+Here are some examples:
 
 - html
+- js
+- jsx
+- vue
+- tsx
+
+### html
 
 ```html
 <script src="./ranui/dist/index.umd.cjs"></script>
@@ -56,7 +52,7 @@ const App = () => {
 </body>
 ```
 
-- js
+### js
 
 ```js
 import 'ranui'
@@ -66,6 +62,95 @@ Button.appendChild('this is button text')
 document.body.appendChild(Button)
 ```
 
-### Meta
+### jsx
+
+```jsx
+import 'ranui'
+const App = () => {
+  return (
+    <>
+      <r-button>Button</r-button>
+    </>
+  )
+}
+```
+
+### vue 
+
+```vue
+<template>
+  <r-button></r-button>
+</template>
+<script>
+  import 'ranui'
+</script>
+
+```
+
+### tsx
+
+```tsx
+// react 18 
+import type { SyntheticEvent } from 'react';
+import React, { useRef } from 'react'
+import 'ranui'
+
+const FilePreview = () => {
+    const ref = useRef<HTMLDivElement | null>(null)
+    const uploadFile = (e: SyntheticEvent<HTMLDivElement>) => {
+        if (ref.current) {
+            const uploadFile = document.createElement('input')
+            uploadFile.setAttribute('type', 'file')
+            uploadFile.click()
+            uploadFile.onchange = (e) => {
+                const { files = [] } = uploadFile
+                if (files && files?.length > 0 && ref.current) {
+                    ref.current.setAttribute('src', '')
+                    const file = files[0]
+                    const url = URL.createObjectURL(file)
+                    ref.current.setAttribute('src', url)
+                }
+            }
+        }
+    }
+    return (
+        <div >
+            <r-preview ref={ref}></r-preview>
+            <r-button type="primary" onClick={uploadFile}>choose file to preview</r-button>
+        </div>
+    )
+}
+```
+
+`jsx` defines the types of all `HTML-native` components in `TypeScript`. 
+
+The `web component` type is not in the `jsx` definition. 
+
+You need to add it manually. 
+
+Otherwise you'll have type problems, but it actually works.
+
+```ts
+// typings.d.ts
+interface RButton {
+  type?: string,
+  onClick?: React.MouseEventHandler<HTMLDivElement> | undefined
+}
+
+interface RPreview {
+  src?: string | Blob | ArrayBuffer,
+  onClick?: React.MouseEventHandler<HTMLDivElement> | undefined
+  ref?: React.MutableRefObject<HTMLDivElement | null>
+}
+
+declare namespace JSX {
+  interface IntrinsicElements {
+    'r-preview': React.DetailedHTMLProps<React.HTMLAttributes<HTMLDivElement>, HTMLDivElement> & RPreview
+    'r-button': React.DetailedHTMLProps<React.HTMLAttributes<HTMLDivElement>, HTMLDivElement> & RButton
+  }
+}
+```
+
+## Meta
 
 [LICENSE (MIT)](/LICENSE)