[Flight] Add rudimentary PG binding (#20372)

* [Flight] Add rudimentary PG binding

* Use nested Maps for parameters

* Inline and fix Flow

packages/react-pg/README.md

@@ -0,0 +1,12 @@
+# react-pg
+
+This package is meant to be used alongside yet-to-be-released, experimental React features. It's unlikely to be useful in any other context.
+
+**Do not use in a real application.** We're publishing this early for
+demonstration purposes.
+
+**Use it at your own risk.**
+
+# No, Really, It Is Unstable
+
+The API ~~may~~ will change wildly between versions.

packages/react-pg/index.browser.js

@@ -0,0 +1,12 @@
+/**
+ * Copyright (c) Facebook, Inc. and its affiliates.
+ *
+ * This source code is licensed under the MIT license found in the
+ * LICENSE file in the root directory of this source tree.
+ *
+ * @flow
+ */
+
+throw new Error(
+ 'This entry point is not yet supported in the browser environment',
+);

packages/react-pg/index.js

@@ -0,0 +1,12 @@
+/**
+ * Copyright (c) Facebook, Inc. and its affiliates.
+ *
+ * This source code is licensed under the MIT license found in the
+ * LICENSE file in the root directory of this source tree.
+ *
+ * @flow
+ */
+
+'use strict';
+
+export * from './index.node';

packages/react-pg/index.node.js

@@ -0,0 +1,12 @@
+/**
+ * Copyright (c) Facebook, Inc. and its affiliates.
+ *
+ * This source code is licensed under the MIT license found in the
+ * LICENSE file in the root directory of this source tree.
+ *
+ * @flow
+ */
+
+'use strict';
+
+export * from './src/ReactPostgres';

packages/react-pg/npm/index.browser.js

@@ -0,0 +1,7 @@
+'use strict';
+
+if (process.env.NODE_ENV === 'production') {
+ module.exports = require('./cjs/react-pg.browser.production.min.js');
+} else {
+ module.exports = require('./cjs/react-pg.browser.development.js');
+}

packages/react-pg/npm/index.js

@@ -0,0 +1,3 @@
+'use strict';
+
+module.exports = require('./index.node');

packages/react-pg/npm/index.node.js

@@ -0,0 +1,7 @@
+'use strict';
+
+if (process.env.NODE_ENV === 'production') {
+ module.exports = require('./cjs/react-pg.node.production.min.js');
+} else {
+ module.exports = require('./cjs/react-pg.node.development.js');
+}

packages/react-pg/package.json

@@ -0,0 +1,27 @@
+{
+ "private": true,
+ "name": "react-pg",
+ "description": "React bindings for PostgreSQL",
+ "version": "0.0.0",
+ "repository": {
+ "type" : "git",
+ "url" : "https://github.com/facebook/react.git",
+ "directory": "packages/react-pg"
+ },
+ "files": [
+ "LICENSE",
+ "README.md",
+ "build-info.json",
+ "index.js",
+ "index.node.js",
+ "index.browser.js",
+ "cjs/"
+ ],
+ "peerDependencies": {
+ "react": "^17.0.0",
+ "pg": "*"
+ },
+ "browser": {
+ "./index.js": "./index.browser.js"
+ }
+}

packages/react-pg/src/ReactPostgres.js

@@ -0,0 +1,107 @@
+/**
+ * Copyright (c) Facebook, Inc. and its affiliates.
+ *
+ * This source code is licensed under the MIT license found in the
+ * LICENSE file in the root directory of this source tree.
+ *
+ * @flow
+ */
+
+import type {Wakeable} from 'shared/ReactTypes';
+
+import {unstable_getCacheForType} from 'react';
+import {Pool as PostgresPool} from 'pg';
+import {prepareValue} from 'pg/lib/utils';
+
+const Pending = 0;
+const Resolved = 1;
+const Rejected = 2;
+
+type PendingResult = {|
+ status: 0,
+ value: Wakeable,
+|};
+
+type ResolvedResult = {|
+ status: 1,
+ value: mixed,
+|};
+
+type RejectedResult = {|
+ status: 2,
+ value: mixed,
+|};
+
+type Result = PendingResult | ResolvedResult | RejectedResult;
+
+function toResult(thenable): Result {
+ const result: Result = {
+ status: Pending,
+ value: thenable,
+ };
+ thenable.then(
+ value => {
+ if (result.status === Pending) {
+ const resolvedResult = ((result: any): ResolvedResult);
+ resolvedResult.status = Resolved;
+ resolvedResult.value = value;
+ }
+ },
+ err => {
+ if (result.status === Pending) {
+ const rejectedResult = ((result: any): RejectedResult);
+ rejectedResult.status = Rejected;
+ rejectedResult.value = err;
+ }
+ },
+ );
+ return result;
+}
+
+function readResult(result: Result) {
+ if (result.status === Resolved) {
+ return result.value;
+ } else {
+ throw result.value;
+ }
+}
+
+export function Pool(options: mixed) {
+ this.pool = new PostgresPool(options);
+ // Unique function per instance because it's used for cache identity.
+ this.createResultMap = function() {
+ return new Map();
+ };
+}
+
+Pool.prototype.query = function(query: string, values?: Array<mixed>) {
+ const pool = this.pool;
+ const outerMap = unstable_getCacheForType(this.createResultMap);
+
+ let innerMap: Map<any, any> = outerMap;
+ let key = query;
+ if (values != null) {
+ // If we have parameters, each becomes as a nesting layer for Maps.
+ // We want to find (or create as needed) the innermost Map, and return that.
+ for (let i = 0; i < values.length; i++) {
+ let nextMap = innerMap.get(key);
+ if (nextMap === undefined) {
+ nextMap = new Map();
+ innerMap.set(key, nextMap);
+ }
+ innerMap = nextMap;
+ // Postgres bindings convert everything to strings:
+ // https://node-postgres.com/features/queries#parameterized-query
+ // We reuse their algorithm instead of reimplementing.
+ key = prepareValue(values[i]);
+ }
+ }
+
+ let entry: Result | void = innerMap.get(key);
+ if (!entry) {
+ const thenable = pool.query(query, values);
+ entry = toResult(thenable);
+ innerMap.set(key, entry);
+ }
+ return readResult(entry);
+};

scripts/flow/environment.js

@@ -69,3 +69,17 @@ declare module 'EventListener' {
 
 declare function __webpack_chunk_load__(id: string): Promise<mixed>;
 declare function __webpack_require__(id: string): any;
+
+declare module 'pg' {
+ declare var Pool: (
+ options: mixed,
+ ) => {
+ query: (query: string, values?: Array<mixed>) => void,
+ };
+}
+
+declare module 'pg/lib/utils' {
+ declare module.exports: {
+ prepareValue(val: any): mixed,
+ };
+}

scripts/rollup/bundles.js

@@ -153,6 +153,24 @@ const bundles = [
  externals: ['react', 'http', 'https'],
  },
 
+ /******* React PG Browser (experimental, new) *******/
+ {
+ bundleTypes: [NODE_DEV, NODE_PROD],
+ moduleType: ISOMORPHIC,
+ entry: 'react-pg/index.browser',
+ global: 'ReactPostgres',
+ externals: [],
+ },
+
+ /******* React PG Node (experimental, new) *******/
+ {
+ bundleTypes: [NODE_DEV, NODE_PROD],
+ moduleType: ISOMORPHIC,
+ entry: 'react-pg/index.node',
+ global: 'ReactPostgres',
+ externals: ['react', 'pg'],
+ },
+
  /******* React DOM *******/
  {
  bundleTypes: [