Merge pull request #31 from thearnica/update-may-2020

Update may 2020

Author: theKashey

README.md

@@ -7,7 +7,7 @@ UID
 [![bundle size](https://badgen.net/bundlephobia/minzip/react-uid)](https://bundlephobia.com/result?p=react-uid)
 [![downloads](https://badgen.net/npm/dm/react-uid)](https://www.npmtrends.com/react-uid)
 
-To generate UID/Key for an `item`, consistently between client and server, __in 900 bytes__.
+To generate a _stable_ UID/Key for a given `item`, consistently between client and server, __in 900 bytes__.
 
 Example - https://codesandbox.io/s/kkmwr6vv47
 
@@ -36,10 +36,11 @@ React UID provides 3 different APIs
   data.map( (item, index) => <li key={uid(item, index)}>{item}</li>)
 ``` 
 
-JS API might be NOT __SSR friendly__,
+JS API might be NOT (multi-tenant)__SSR friendly__,
 
 #### React Components
-- `UID` - renderless container for generation Ids
+- (deprecated)`UID` - renderless container for generation Ids
+- `UIDConsumer` - renderless container for generation Ids
 ```js
  import {UID} from 'react-uid';
 
@@ -80,8 +81,8 @@ The difference between `uid` and `UID` versions are in "nesting" - any `UID` use
 
 UID might be NOT __SSR friendly__,
 
-#### Hooks (16.7+)
-- `useUID()` will generate just a UID
+#### Hooks (16.8+)
+- `useUID()` will generate a "stable" UID
 - `useUIDSeed()` will generate a seed generator, you can use for multiple fields
 ```js
 const Form = () => {

__tests__/__snapshots__/index.spec.tsx.snap

@@ -3,103 +3,103 @@
 exports[`UID test UID 1`] = `
 <div>
   <span>
-    1
+    ruid-1
   </span>
   <span>
-    2
+    ruid-2
      
-    2-uid1
+    ruid-2-uid1
   </span>
 </div>
 `;
 
 exports[`UID test UID 2`] = `
 <div>
   <span>
-    key-3
+    key-ruid-3
   </span>
   <span>
-    key-4
+    key-ruid-4
      
-    key-4-uid2
+    key-ruid-4-uid2
   </span>
 </div>
 `;
 
 exports[`UID test UIDConsumer 1`] = `
 Array [
   <span>
-    1
+    ruid-1
   </span>,
   <span>
-    2
+    ruid-2
      
-    2-uid1
+    ruid-2-uid1
   </span>,
   <span>
-    5
+    ruid-5
   </span>,
 ]
 `;
 
 exports[`UID test UIDConsumer 2`] = `
 Array [
   <span>
-    1
+    ruid-1
   </span>,
   <span>
-    1
+    ruid-1
      
-    1-uid1
+    ruid-1-uid1
   </span>,
   <span>
-    6
+    ruid-6
   </span>,
 ]
 `;
 
 exports[`UID test UIDFork 1`] = `
 Array [
   <span>
-    1-1
+    ruid-1-1
   </span>,
   <span>
-    1-2
+    ruid-1-2
   </span>,
   <span>
-    2-1
+    ruid-2-1
   </span>,
   <span>
-    2-2
+    ruid-2-2
   </span>,
   <span>
-    3-1
+    ruid-3-1
   </span>,
   <span>
-    4-1
+    ruid-4-1
   </span>,
 ]
 `;
 
 exports[`UID test UIDFork uid 1`] = `
 Array [
   <span>
-    1-1-uid1
+    ruid-1-1-uid1
   </span>,
   <span>
-    1-2-uid2
+    ruid-1-2-uid2
   </span>,
   <span>
-    1-3-uid1
+    ruid-1-3-uid1
   </span>,
   <span>
-    2-1-uid1
+    ruid-2-1-uid1
   </span>,
   <span>
-    2-2-uid2
+    ruid-2-2-uid2
   </span>,
   <span>
-    2-3-uid1
+    ruid-2-3-uid1
   </span>,
 ]
 `;

package.json

@@ -1,7 +1,7 @@
 {
   "name": "react-uid",
   "version": "2.2.0",
-  "description": "Render less container for ID generation",
+  "description": "Render-less container for ID generation",
   "sideEffects": false,
   "main": "dist/es5/index.js",
   "types": "dist/es5/index.d.ts",
@@ -39,11 +39,11 @@
     "@types/node": "10.5.2",
     "codecov": "^3.0.2",
     "flow-bin": "^0.76.0",
-    "react": "^16.7.0-alpha.2",
-    "react-dom": "^16.7.0-alpha.2",
+    "react": "^16.8.0",
+    "react-dom": "^16.8.0",
     "react-test-renderer": "^16.4.0",
     "size-limit": "^0.21.1",
-    "ts-react-toolbox": "^0.1.21"
+    "ts-react-toolbox": "^0.2.20"
   },
   "size-limit": [
     {
@@ -55,7 +55,16 @@
     "node": ">=8.5.0"
   },
   "peerDependencies": {
-    "react": "^16.3.0"
+    "@types/react": "^16.8.0",
+    "react": "^16.8.0"
+  },
+  "peerDependenciesMeta": {
+    "@types/react": {
+      "optional": true
+    }
+  },
+  "dependencies": {
+    "tslib": "^1.10.0"
   },
   "keywords": [
     "react",

src/UIDComponent.ts

@@ -10,7 +10,6 @@ export class UID extends React.Component<UIDProps> {
     id: getId(this.props.idSource || counter)
   };
 
-
   prefixId(id: number | string) {
     const uid = (this.state.prefix + id);
     return String(this.props.name ? this.props.name(uid) : uid);

src/context.ts

@@ -7,7 +7,7 @@ export type IdSourceType = {
   uid: (item: any, index?: number) => string,
 }
 
-export const createSource = (prefix = ''): IdSourceType => ({
+export const createSource = (prefix = 'ruid-'): IdSourceType => ({
   value: 1,
   prefix: prefix,
   uid: generateUID()
@@ -22,7 +22,6 @@ export interface UIDProps {
 export const counter = createSource();
 
 export const source = React.createContext(createSource());
-export const lastUsed = React.createContext("");
 
 export const getId = (source: IdSourceType) => source.value++;
-export const getPrefix = (source?: IdSourceType) => source ? source.prefix : '';
+export const getPrefix = (source?: IdSourceType) => source ? source.prefix : 'ruid-';

src/hooks.ts

@@ -1,4 +1,3 @@
-// @ts-ignore
 import * as React from "react";
 import {counter, getId, getPrefix, IdSourceType, source} from "./context";
 
@@ -16,10 +15,10 @@ const generateUID = (context: IdSourceType) => {
 const useUIDState = () => {
   if (process.env.NODE_ENV !== "production") {
     if (!('useContext' in React)) {
-      throw new Error('Hooks API requires React 16.7+');
+      throw new Error('Hooks API requires React 16.8+');
     }
   }
-  // @ts-ignore
+
   return React.useState(generateUID(React.useContext(source)))
 };
 

src/index.ts

@@ -1,10 +1,8 @@
-import {generateUID} from "./uid";
+import {generateUID, generatedUID as uid} from "./uid";
 import {UIDReset, UIDConsumer, UIDFork} from "./Control";
 import {useUID, useUIDSeed} from "./hooks";
 import {UID} from "./UIDComponent";
 
-const uid = generateUID();
-
 export {
   generateUID,
   uid,

src/uid.ts

@@ -19,4 +19,6 @@ export const generateUID = () => {
   };
 
   return uid;
-}
+}
+
+export const generatedUID = generateUID();