Add react-meteor-state/use-meteor-state

packages/react-meteor-state/.gitignore

@@ -0,0 +1 @@
+node_modules

packages/react-meteor-state/.meteorignore

@@ -0,0 +1,3 @@
+node_modules
+package.json
+package-lock.json

packages/react-meteor-state/README.md

@@ -0,0 +1,4 @@
+meteor/react-meteor-state
+=========================
+
+A state hook, with an API similar to React's useState, which provides data persistence between page reloads using hte Meteor reload package.

packages/react-meteor-state/package.js

@@ -0,0 +1,17 @@
+/* global Package */
+
+Package.describe({
+  name: 'react-meteor-state',
+  summary: 'React hook for reactively tracking Meteor data',
+  version: '0.9.0',
+  documentation: 'README.md',
+  git: 'https://github.com/meteor/react-packages',
+});
+
+Package.onUse(function (api) {
+  api.versionsFrom('1.10');
+  api.use('tracker');
+  api.use('typescript');
+
+  api.mainModule('use-meteor-state.ts', ['client', 'server'], { lazy: true });
+});

packages/react-meteor-state/package.json

@@ -0,0 +1,15 @@
+{
+  "name": "meteor-react-meteor-state",
+  "scripts": {
+    "make-types": "npx typescript *.ts --declaration --emitDeclarationOnly --outDir types"
+  },
+  "devDependencies": {
+    "@testing-library/react": "^10.0.2",
+    "@types/meteor": "^1.4.42",
+    "@types/react": "^16.9.34",
+    "react": "16.13.1",
+    "react-dom": "16.13.1",
+    "react-test-renderer": "16.13.1",
+    "typescript": "^4.0.3"
+  }
+}

packages/react-meteor-state/types/use-meteor-state.d.ts

@@ -0,0 +1,3 @@
+import { SetStateAction, Dispatch } from 'react';
+declare const _default: <S>(initialValue: S | (() => S), name: string) => [S, Dispatch<SetStateAction<S>>];
+export default _default;

packages/react-meteor-state/use-meteor-state.ts

@@ -0,0 +1,47 @@
+import { Meteor } from 'meteor/meteor'
+import { Reload } from 'meteor/reload'
+import { useState, useEffect, SetStateAction, Dispatch } from 'react'
+
+interface IHash {
+  [key: string] : any
+}
+
+if (Meteor.isClient) {
+  var toMigrate: IHash = {}
+  var migrated: IHash = Reload._migrationData('use-meteor-state') || {}
+
+  Reload._onMigrate('use-meteor-state', () => [true, toMigrate])
+}
+
+const useMeteorState = <S>(initialValue: S | (() => S), name: string): [S, Dispatch<SetStateAction<S>>] => {
+  // When running in concurrent mode, this may run multiple times ...
+  if (migrated[name]) {
+    initialValue = migrated[name]
+  }
+
+  useEffect(() => {
+    // ... so cleanup happens only after the render is committed
+    if (migrated[name]) {
+      // move to toMigrate for next refresh
+      toMigrate[name] = migrated[name]
+      delete migrated[name]
+    }
+    return () => {
+      // Remove migration on unmount
+      if (toMigrate[name]) {
+        delete toMigrate[name]
+      }
+    }
+  }, [name])
+
+  const [value, setValue] = useState(initialValue)
+
+  return [value, (value: S) => {
+    toMigrate[name] = value
+    setValue(value)
+  }]
+}
+
+export default Meteor.isClient
+  ? useMeteorState
+  : useState