Initial Sample.

This commit is contained in:
2024-06-03 20:23:50 +05:30
parent ef2b65f673
commit 5269ec3c66
2575 changed files with 282312 additions and 0 deletions

View File

@@ -0,0 +1,22 @@
import type * as ReactTypes from "react";
import type { ObservableQuery, OperationVariables } from "../../core/index.js";
import type { QueryDataOptions } from "../types/types.js";
interface QueryData {
getOptions(): any;
fetchData(): Promise<void>;
}
export declare class RenderPromises {
private queryPromises;
private queryInfoTrie;
private stopped;
stop(): void;
registerSSRObservable<TData, TVariables extends OperationVariables>(observable: ObservableQuery<any, TVariables>): void;
getSSRObservable<TData, TVariables extends OperationVariables>(props: QueryDataOptions<TData, TVariables>): ObservableQuery<any, TVariables> | null;
addQueryPromise(queryInstance: QueryData, finish?: () => ReactTypes.ReactNode): ReactTypes.ReactNode;
addObservableQueryPromise<TData, TVariables extends OperationVariables>(obsQuery: ObservableQuery<TData, TVariables>): ReactTypes.ReactNode;
hasPromises(): boolean;
consumeAndAwaitPromises(): Promise<any[]>;
private lookupQueryInfo;
}
export {};
//# sourceMappingURL=RenderPromises.d.ts.map

View File

@@ -0,0 +1,112 @@
function makeDefaultQueryInfo() {
return {
seen: false,
observable: null,
};
}
var RenderPromises = /** @class */ (function () {
function RenderPromises() {
// Map from Query component instances to pending fetchData promises.
this.queryPromises = new Map();
// Two-layered map from (query document, stringified variables) to QueryInfo
// objects. These QueryInfo objects are intended to survive through the whole
// getMarkupFromTree process, whereas specific Query instances do not survive
// beyond a single call to renderToStaticMarkup.
this.queryInfoTrie = new Map();
this.stopped = false;
}
RenderPromises.prototype.stop = function () {
if (!this.stopped) {
this.queryPromises.clear();
this.queryInfoTrie.clear();
this.stopped = true;
}
};
// Registers the server side rendered observable.
RenderPromises.prototype.registerSSRObservable = function (observable) {
if (this.stopped)
return;
this.lookupQueryInfo(observable.options).observable = observable;
};
// Get's the cached observable that matches the SSR Query instances query and variables.
RenderPromises.prototype.getSSRObservable = function (props) {
return this.lookupQueryInfo(props).observable;
};
RenderPromises.prototype.addQueryPromise = function (queryInstance, finish) {
if (!this.stopped) {
var info = this.lookupQueryInfo(queryInstance.getOptions());
if (!info.seen) {
this.queryPromises.set(queryInstance.getOptions(), new Promise(function (resolve) {
resolve(queryInstance.fetchData());
}));
// Render null to abandon this subtree for this rendering, so that we
// can wait for the data to arrive.
return null;
}
}
return finish ? finish() : null;
};
RenderPromises.prototype.addObservableQueryPromise = function (obsQuery) {
return this.addQueryPromise({
// The only options which seem to actually be used by the
// RenderPromises class are query and variables.
getOptions: function () { return obsQuery.options; },
fetchData: function () {
return new Promise(function (resolve) {
var sub = obsQuery.subscribe({
next: function (result) {
if (!result.loading) {
resolve();
sub.unsubscribe();
}
},
error: function () {
resolve();
sub.unsubscribe();
},
complete: function () {
resolve();
},
});
});
},
});
};
RenderPromises.prototype.hasPromises = function () {
return this.queryPromises.size > 0;
};
RenderPromises.prototype.consumeAndAwaitPromises = function () {
var _this = this;
var promises = [];
this.queryPromises.forEach(function (promise, queryInstance) {
// Make sure we never try to call fetchData for this query document and
// these variables again. Since the queryInstance objects change with
// every rendering, deduplicating them by query and variables is the
// best we can do. If a different Query component happens to have the
// same query document and variables, it will be immediately rendered
// by calling finish() in addQueryPromise, which could result in the
// rendering of an unwanted loading state, but that's not nearly as bad
// as getting stuck in an infinite rendering loop because we kept calling
// queryInstance.fetchData for the same Query component indefinitely.
_this.lookupQueryInfo(queryInstance).seen = true;
promises.push(promise);
});
this.queryPromises.clear();
return Promise.all(promises);
};
RenderPromises.prototype.lookupQueryInfo = function (props) {
var queryInfoTrie = this.queryInfoTrie;
var query = props.query, variables = props.variables;
var varMap = queryInfoTrie.get(query) || new Map();
if (!queryInfoTrie.has(query))
queryInfoTrie.set(query, varMap);
var variablesString = JSON.stringify(variables);
var info = varMap.get(variablesString) || makeDefaultQueryInfo();
if (!varMap.has(variablesString))
varMap.set(variablesString, info);
return info;
};
return RenderPromises;
}());
export { RenderPromises };
//# sourceMappingURL=RenderPromises.js.map

File diff suppressed because one or more lines are too long

View File

@@ -0,0 +1,13 @@
import type * as ReactTypes from "react";
export declare function getDataFromTree(tree: ReactTypes.ReactNode, context?: {
[key: string]: any;
}): Promise<string>;
export type GetMarkupFromTreeOptions = {
tree: ReactTypes.ReactNode;
context?: {
[key: string]: any;
};
renderFunction?: (tree: ReactTypes.ReactElement<any>) => string | PromiseLike<string>;
};
export declare function getMarkupFromTree({ tree, context, renderFunction, }: GetMarkupFromTreeOptions): Promise<string>;
//# sourceMappingURL=getDataFromTree.d.ts.map

View File

@@ -0,0 +1,49 @@
import { __assign } from "tslib";
import * as React from "rehackt";
import { getApolloContext } from "../context/index.js";
import { RenderPromises } from "./RenderPromises.js";
import { renderToStaticMarkup } from "react-dom/server";
export function getDataFromTree(tree, context) {
if (context === void 0) { context = {}; }
return getMarkupFromTree({
tree: tree,
context: context,
// If you need to configure this renderFunction, call getMarkupFromTree
// directly instead of getDataFromTree.
renderFunction: renderToStaticMarkup,
});
}
export function getMarkupFromTree(_a) {
var tree = _a.tree, _b = _a.context, context = _b === void 0 ? {} : _b,
// The rendering function is configurable! We use renderToStaticMarkup as
// the default, because it's a little less expensive than renderToString,
// and legacy usage of getDataFromTree ignores the return value anyway.
_c = _a.renderFunction,
// The rendering function is configurable! We use renderToStaticMarkup as
// the default, because it's a little less expensive than renderToString,
// and legacy usage of getDataFromTree ignores the return value anyway.
renderFunction = _c === void 0 ? renderToStaticMarkup : _c;
var renderPromises = new RenderPromises();
function process() {
// Always re-render from the rootElement, even though it might seem
// better to render the children of the component responsible for the
// promise, because it is not possible to reconstruct the full context
// of the original rendering (including all unknown context provider
// elements) for a subtree of the original component tree.
var ApolloContext = getApolloContext();
return new Promise(function (resolve) {
var element = React.createElement(ApolloContext.Provider, { value: __assign(__assign({}, context), { renderPromises: renderPromises }) }, tree);
resolve(renderFunction(element));
})
.then(function (html) {
return renderPromises.hasPromises() ?
renderPromises.consumeAndAwaitPromises().then(process)
: html;
})
.finally(function () {
renderPromises.stop();
});
}
return Promise.resolve().then(process);
}
//# sourceMappingURL=getDataFromTree.js.map

View File

@@ -0,0 +1 @@
{"version":3,"file":"getDataFromTree.js","sourceRoot":"","sources":["../../../src/react/ssr/getDataFromTree.ts"],"names":[],"mappings":";AAAA,OAAO,KAAK,KAAK,MAAM,SAAS,CAAC;AAEjC,OAAO,EAAE,gBAAgB,EAAE,MAAM,qBAAqB,CAAC;AACvD,OAAO,EAAE,cAAc,EAAE,MAAM,qBAAqB,CAAC;AACrD,OAAO,EAAE,oBAAoB,EAAE,MAAM,kBAAkB,CAAC;AAExD,MAAM,UAAU,eAAe,CAC7B,IAA0B,EAC1B,OAAoC;IAApC,wBAAA,EAAA,YAAoC;IAEpC,OAAO,iBAAiB,CAAC;QACvB,IAAI,MAAA;QACJ,OAAO,SAAA;QACP,uEAAuE;QACvE,uCAAuC;QACvC,cAAc,EAAE,oBAAoB;KACrC,CAAC,CAAC;AACL,CAAC;AAUD,MAAM,UAAU,iBAAiB,CAAC,EAOP;QANzB,IAAI,UAAA,EACJ,eAAY,EAAZ,OAAO,mBAAG,EAAE,KAAA;IACZ,yEAAyE;IACzE,yEAAyE;IACzE,uEAAuE;IACvE,sBAAqC;IAHrC,yEAAyE;IACzE,yEAAyE;IACzE,uEAAuE;IACvE,cAAc,mBAAG,oBAAoB,KAAA;IAErC,IAAM,cAAc,GAAG,IAAI,cAAc,EAAE,CAAC;IAE5C,SAAS,OAAO;QACd,mEAAmE;QACnE,qEAAqE;QACrE,sEAAsE;QACtE,oEAAoE;QACpE,0DAA0D;QAC1D,IAAM,aAAa,GAAG,gBAAgB,EAAE,CAAC;QAEzC,OAAO,IAAI,OAAO,CAAS,UAAC,OAAO;YACjC,IAAM,OAAO,GAAG,KAAK,CAAC,aAAa,CACjC,aAAa,CAAC,QAAQ,EACtB,EAAE,KAAK,wBAAO,OAAO,KAAE,cAAc,gBAAA,GAAE,EAAE,EACzC,IAAI,CACL,CAAC;YACF,OAAO,CAAC,cAAc,CAAC,OAAO,CAAC,CAAC,CAAC;QACnC,CAAC,CAAC;aACC,IAAI,CAAC,UAAC,IAAI;YACT,OAAO,cAAc,CAAC,WAAW,EAAE,CAAC,CAAC;gBACjC,cAAc,CAAC,uBAAuB,EAAE,CAAC,IAAI,CAAC,OAAO,CAAC;gBACxD,CAAC,CAAC,IAAI,CAAC;QACX,CAAC,CAAC;aACD,OAAO,CAAC;YACP,cAAc,CAAC,IAAI,EAAE,CAAC;QACxB,CAAC,CAAC,CAAC;IACP,CAAC;IAED,OAAO,OAAO,CAAC,OAAO,EAAE,CAAC,IAAI,CAAC,OAAO,CAAC,CAAC;AACzC,CAAC","sourcesContent":["import * as React from \"rehackt\";\nimport type * as ReactTypes from \"react\";\nimport { getApolloContext } from \"../context/index.js\";\nimport { RenderPromises } from \"./RenderPromises.js\";\nimport { renderToStaticMarkup } from \"react-dom/server\";\n\nexport function getDataFromTree(\n tree: ReactTypes.ReactNode,\n context: { [key: string]: any } = {}\n) {\n return getMarkupFromTree({\n tree,\n context,\n // If you need to configure this renderFunction, call getMarkupFromTree\n // directly instead of getDataFromTree.\n renderFunction: renderToStaticMarkup,\n });\n}\n\nexport type GetMarkupFromTreeOptions = {\n tree: ReactTypes.ReactNode;\n context?: { [key: string]: any };\n renderFunction?: (\n tree: ReactTypes.ReactElement<any>\n ) => string | PromiseLike<string>;\n};\n\nexport function getMarkupFromTree({\n tree,\n context = {},\n // The rendering function is configurable! We use renderToStaticMarkup as\n // the default, because it's a little less expensive than renderToString,\n // and legacy usage of getDataFromTree ignores the return value anyway.\n renderFunction = renderToStaticMarkup,\n}: GetMarkupFromTreeOptions): Promise<string> {\n const renderPromises = new RenderPromises();\n\n function process(): Promise<string> {\n // Always re-render from the rootElement, even though it might seem\n // better to render the children of the component responsible for the\n // promise, because it is not possible to reconstruct the full context\n // of the original rendering (including all unknown context provider\n // elements) for a subtree of the original component tree.\n const ApolloContext = getApolloContext();\n\n return new Promise<string>((resolve) => {\n const element = React.createElement(\n ApolloContext.Provider,\n { value: { ...context, renderPromises } },\n tree\n );\n resolve(renderFunction(element));\n })\n .then((html) => {\n return renderPromises.hasPromises() ?\n renderPromises.consumeAndAwaitPromises().then(process)\n : html;\n })\n .finally(() => {\n renderPromises.stop();\n });\n }\n\n return Promise.resolve().then(process);\n}\n"]}

View File

@@ -0,0 +1,4 @@
export { getMarkupFromTree, getDataFromTree } from "./getDataFromTree.js";
export { renderToStringWithData } from "./renderToStringWithData.js";
export { RenderPromises } from "./RenderPromises.js";
//# sourceMappingURL=index.d.ts.map

View File

@@ -0,0 +1,4 @@
export { getMarkupFromTree, getDataFromTree } from "./getDataFromTree.js";
export { renderToStringWithData } from "./renderToStringWithData.js";
export { RenderPromises } from "./RenderPromises.js";
//# sourceMappingURL=index.js.map

View File

@@ -0,0 +1 @@
{"version":3,"file":"index.js","sourceRoot":"","sources":["../../../src/react/ssr/index.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,iBAAiB,EAAE,eAAe,EAAE,MAAM,sBAAsB,CAAC;AAC1E,OAAO,EAAE,sBAAsB,EAAE,MAAM,6BAA6B,CAAC;AACrE,OAAO,EAAE,cAAc,EAAE,MAAM,qBAAqB,CAAC","sourcesContent":["export { getMarkupFromTree, getDataFromTree } from \"./getDataFromTree.js\";\nexport { renderToStringWithData } from \"./renderToStringWithData.js\";\nexport { RenderPromises } from \"./RenderPromises.js\";\n"]}

View File

@@ -0,0 +1,8 @@
{
"name": "@apollo/client/react/ssr",
"type": "module",
"main": "ssr.cjs",
"module": "index.js",
"types": "index.d.ts",
"sideEffects": false
}

View File

@@ -0,0 +1,3 @@
import type * as ReactTypes from "react";
export declare function renderToStringWithData(component: ReactTypes.ReactElement<any>): Promise<string>;
//# sourceMappingURL=renderToStringWithData.d.ts.map

View File

@@ -0,0 +1,9 @@
import { getMarkupFromTree } from "./getDataFromTree.js";
import { renderToString } from "react-dom/server";
export function renderToStringWithData(component) {
return getMarkupFromTree({
tree: component,
renderFunction: renderToString,
});
}
//# sourceMappingURL=renderToStringWithData.js.map

View File

@@ -0,0 +1 @@
{"version":3,"file":"renderToStringWithData.js","sourceRoot":"","sources":["../../../src/react/ssr/renderToStringWithData.ts"],"names":[],"mappings":"AACA,OAAO,EAAE,iBAAiB,EAAE,MAAM,sBAAsB,CAAC;AACzD,OAAO,EAAE,cAAc,EAAE,MAAM,kBAAkB,CAAC;AAElD,MAAM,UAAU,sBAAsB,CACpC,SAAuC;IAEvC,OAAO,iBAAiB,CAAC;QACvB,IAAI,EAAE,SAAS;QACf,cAAc,EAAE,cAAc;KAC/B,CAAC,CAAC;AACL,CAAC","sourcesContent":["import type * as ReactTypes from \"react\";\nimport { getMarkupFromTree } from \"./getDataFromTree.js\";\nimport { renderToString } from \"react-dom/server\";\n\nexport function renderToStringWithData(\n component: ReactTypes.ReactElement<any>\n): Promise<string> {\n return getMarkupFromTree({\n tree: component,\n renderFunction: renderToString,\n });\n}\n"]}

View File

@@ -0,0 +1,157 @@
'use strict';
Object.defineProperty(exports, '__esModule', { value: true });
var tslib = require('tslib');
var React = require('rehackt');
var context = require('../context');
var server = require('react-dom/server');
function _interopNamespace(e) {
if (e && e.__esModule) return e;
var n = Object.create(null);
if (e) {
for (var k in e) {
n[k] = e[k];
}
}
n["default"] = e;
return Object.freeze(n);
}
var React__namespace = /*#__PURE__*/_interopNamespace(React);
function makeDefaultQueryInfo() {
return {
seen: false,
observable: null,
};
}
var RenderPromises = (function () {
function RenderPromises() {
this.queryPromises = new Map();
this.queryInfoTrie = new Map();
this.stopped = false;
}
RenderPromises.prototype.stop = function () {
if (!this.stopped) {
this.queryPromises.clear();
this.queryInfoTrie.clear();
this.stopped = true;
}
};
RenderPromises.prototype.registerSSRObservable = function (observable) {
if (this.stopped)
return;
this.lookupQueryInfo(observable.options).observable = observable;
};
RenderPromises.prototype.getSSRObservable = function (props) {
return this.lookupQueryInfo(props).observable;
};
RenderPromises.prototype.addQueryPromise = function (queryInstance, finish) {
if (!this.stopped) {
var info = this.lookupQueryInfo(queryInstance.getOptions());
if (!info.seen) {
this.queryPromises.set(queryInstance.getOptions(), new Promise(function (resolve) {
resolve(queryInstance.fetchData());
}));
return null;
}
}
return finish ? finish() : null;
};
RenderPromises.prototype.addObservableQueryPromise = function (obsQuery) {
return this.addQueryPromise({
getOptions: function () { return obsQuery.options; },
fetchData: function () {
return new Promise(function (resolve) {
var sub = obsQuery.subscribe({
next: function (result) {
if (!result.loading) {
resolve();
sub.unsubscribe();
}
},
error: function () {
resolve();
sub.unsubscribe();
},
complete: function () {
resolve();
},
});
});
},
});
};
RenderPromises.prototype.hasPromises = function () {
return this.queryPromises.size > 0;
};
RenderPromises.prototype.consumeAndAwaitPromises = function () {
var _this = this;
var promises = [];
this.queryPromises.forEach(function (promise, queryInstance) {
_this.lookupQueryInfo(queryInstance).seen = true;
promises.push(promise);
});
this.queryPromises.clear();
return Promise.all(promises);
};
RenderPromises.prototype.lookupQueryInfo = function (props) {
var queryInfoTrie = this.queryInfoTrie;
var query = props.query, variables = props.variables;
var varMap = queryInfoTrie.get(query) || new Map();
if (!queryInfoTrie.has(query))
queryInfoTrie.set(query, varMap);
var variablesString = JSON.stringify(variables);
var info = varMap.get(variablesString) || makeDefaultQueryInfo();
if (!varMap.has(variablesString))
varMap.set(variablesString, info);
return info;
};
return RenderPromises;
}());
function getDataFromTree(tree, context) {
if (context === void 0) { context = {}; }
return getMarkupFromTree({
tree: tree,
context: context,
renderFunction: server.renderToStaticMarkup,
});
}
function getMarkupFromTree(_a) {
var tree = _a.tree, _b = _a.context, context$1 = _b === void 0 ? {} : _b,
_c = _a.renderFunction,
renderFunction = _c === void 0 ? server.renderToStaticMarkup : _c;
var renderPromises = new RenderPromises();
function process() {
var ApolloContext = context.getApolloContext();
return new Promise(function (resolve) {
var element = React__namespace.createElement(ApolloContext.Provider, { value: tslib.__assign(tslib.__assign({}, context$1), { renderPromises: renderPromises }) }, tree);
resolve(renderFunction(element));
})
.then(function (html) {
return renderPromises.hasPromises() ?
renderPromises.consumeAndAwaitPromises().then(process)
: html;
})
.finally(function () {
renderPromises.stop();
});
}
return Promise.resolve().then(process);
}
function renderToStringWithData(component) {
return getMarkupFromTree({
tree: component,
renderFunction: server.renderToString,
});
}
exports.RenderPromises = RenderPromises;
exports.getDataFromTree = getDataFromTree;
exports.getMarkupFromTree = getMarkupFromTree;
exports.renderToStringWithData = renderToStringWithData;
//# sourceMappingURL=ssr.cjs.map

File diff suppressed because one or more lines are too long

View File

@@ -0,0 +1,157 @@
'use strict';
Object.defineProperty(exports, '__esModule', { value: true });
var tslib = require('tslib');
var React = require('rehackt');
var context = require('../context');
var server = require('react-dom/server');
function _interopNamespace(e) {
if (e && e.__esModule) return e;
var n = Object.create(null);
if (e) {
for (var k in e) {
n[k] = e[k];
}
}
n["default"] = e;
return Object.freeze(n);
}
var React__namespace = /*#__PURE__*/_interopNamespace(React);
function makeDefaultQueryInfo() {
return {
seen: false,
observable: null,
};
}
var RenderPromises = (function () {
function RenderPromises() {
this.queryPromises = new Map();
this.queryInfoTrie = new Map();
this.stopped = false;
}
RenderPromises.prototype.stop = function () {
if (!this.stopped) {
this.queryPromises.clear();
this.queryInfoTrie.clear();
this.stopped = true;
}
};
RenderPromises.prototype.registerSSRObservable = function (observable) {
if (this.stopped)
return;
this.lookupQueryInfo(observable.options).observable = observable;
};
RenderPromises.prototype.getSSRObservable = function (props) {
return this.lookupQueryInfo(props).observable;
};
RenderPromises.prototype.addQueryPromise = function (queryInstance, finish) {
if (!this.stopped) {
var info = this.lookupQueryInfo(queryInstance.getOptions());
if (!info.seen) {
this.queryPromises.set(queryInstance.getOptions(), new Promise(function (resolve) {
resolve(queryInstance.fetchData());
}));
return null;
}
}
return finish ? finish() : null;
};
RenderPromises.prototype.addObservableQueryPromise = function (obsQuery) {
return this.addQueryPromise({
getOptions: function () { return obsQuery.options; },
fetchData: function () {
return new Promise(function (resolve) {
var sub = obsQuery.subscribe({
next: function (result) {
if (!result.loading) {
resolve();
sub.unsubscribe();
}
},
error: function () {
resolve();
sub.unsubscribe();
},
complete: function () {
resolve();
},
});
});
},
});
};
RenderPromises.prototype.hasPromises = function () {
return this.queryPromises.size > 0;
};
RenderPromises.prototype.consumeAndAwaitPromises = function () {
var _this = this;
var promises = [];
this.queryPromises.forEach(function (promise, queryInstance) {
_this.lookupQueryInfo(queryInstance).seen = true;
promises.push(promise);
});
this.queryPromises.clear();
return Promise.all(promises);
};
RenderPromises.prototype.lookupQueryInfo = function (props) {
var queryInfoTrie = this.queryInfoTrie;
var query = props.query, variables = props.variables;
var varMap = queryInfoTrie.get(query) || new Map();
if (!queryInfoTrie.has(query))
queryInfoTrie.set(query, varMap);
var variablesString = JSON.stringify(variables);
var info = varMap.get(variablesString) || makeDefaultQueryInfo();
if (!varMap.has(variablesString))
varMap.set(variablesString, info);
return info;
};
return RenderPromises;
}());
function getDataFromTree(tree, context) {
if (context === void 0) { context = {}; }
return getMarkupFromTree({
tree: tree,
context: context,
renderFunction: server.renderToStaticMarkup,
});
}
function getMarkupFromTree(_a) {
var tree = _a.tree, _b = _a.context, context$1 = _b === void 0 ? {} : _b,
_c = _a.renderFunction,
renderFunction = _c === void 0 ? server.renderToStaticMarkup : _c;
var renderPromises = new RenderPromises();
function process() {
var ApolloContext = context.getApolloContext();
return new Promise(function (resolve) {
var element = React__namespace.createElement(ApolloContext.Provider, { value: tslib.__assign(tslib.__assign({}, context$1), { renderPromises: renderPromises }) }, tree);
resolve(renderFunction(element));
})
.then(function (html) {
return renderPromises.hasPromises() ?
renderPromises.consumeAndAwaitPromises().then(process)
: html;
})
.finally(function () {
renderPromises.stop();
});
}
return Promise.resolve().then(process);
}
function renderToStringWithData(component) {
return getMarkupFromTree({
tree: component,
renderFunction: server.renderToString,
});
}
exports.RenderPromises = RenderPromises;
exports.getDataFromTree = getDataFromTree;
exports.getMarkupFromTree = getMarkupFromTree;
exports.renderToStringWithData = renderToStringWithData;
//# sourceMappingURL=ssr.cjs.map