@modern-js/plugin-data-loader 0.0.0-next-20221104140607

package/CHANGELOG.md

@@ -0,0 +1,19 @@
+# @modern-js/plugin-data-loader
+
+## 0.0.0-next-20221104140607
+
+### Minor Changes
+
+- 543be955: feat: compile server loader and support handle loader request
+  feat: 编译 server loader 并支持处理 loader 的请求
+
+### Patch Changes
+
+- Updated dependencies [edd1cfb1]
+- Updated dependencies [cc971eab]
+- Updated dependencies [b8bbe036]
+- Updated dependencies [d5a31df7]
+- Updated dependencies [3bbea92b]
+- Updated dependencies [543be955]
+  - @modern-js/utils@0.0.0-next-20221104140607
+  - @modern-js/babel-compiler@0.0.0-next-20221104140607

package/LICENSE

@@ -0,0 +1,21 @@
+MIT License
+
+Copyright (c) 2021 Modern.js
+
+Permission is hereby granted, free of charge, to any person obtaining a copy
+of this software and associated documentation files (the "Software"), to deal
+in the Software without restriction, including without limitation the rights
+to use, copy, modify, merge, publish, distribute, sublicense, and/or sell
+copies of the Software, and to permit persons to whom the Software is
+furnished to do so, subject to the following conditions:
+
+The above copyright notice and this permission notice shall be included in all
+copies or substantial portions of the Software.
+
+THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR
+IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY,
+FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE
+AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER
+LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM,
+OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE
+SOFTWARE.

package/README.md

@@ -0,0 +1,30 @@
+
+<p align="center">
+  <a href="https://modernjs.dev" target="blank"><img src="https://lf3-static.bytednsdoc.com/obj/eden-cn/ylaelkeh7nuhfnuhf/modernjs-cover.png" width="300" alt="Modern.js Logo" /></a>
+</p>
+<p align="center">
+现代 Web 工程体系
+  <br/>
+  <a href="https://modernjs.dev" target="blank">
+    modernjs.dev
+  </a>
+</p>
+<p align="center">
+  The meta-framework suite designed from scratch for frontend-focused modern web development
+</p>
+
+# Introduction
+
+> The doc site ([modernjs.dev](https://modernjs.dev)) and articles are only available in Chinese for now, we are planning to add English versions soon.
+
+- [Modern.js: Hello, World!](https://zhuanlan.zhihu.com/p/426707646)
+
+## Getting Started
+
+- [Quick Start](https://modernjs.dev/docs/start)
+- [Guides](https://modernjs.dev/docs/guides)
+- [API References](https://modernjs.dev/docs/apis)
+
+## Contributing
+
+- [Contributing Guide](https://github.com/modern-js-dev/modern.js/blob/main/CONTRIBUTING.md)

package/dist/js/modern/cli/create-request.js

@@ -0,0 +1,44 @@
+// eslint-disable-next-line eslint-comments/disable-enable-pair
+
+/* eslint-disable node/prefer-global/url */
+// eslint-disable-next-line eslint-comments/disable-enable-pair
+
+/* eslint-disable node/no-unsupported-features/node-builtins */
+import { compile } from 'path-to-regexp';
+export const getRequestUrl = ({
+  params,
+  request,
+  routeId
+}) => {
+  const url = new URL(request.url);
+  const toPath = compile(url.pathname, {
+    encode: encodeURIComponent
+  });
+  const newPathName = toPath(params);
+  url.pathname = newPathName;
+  url.searchParams.append('_loader', routeId);
+  return url;
+};
+export const createRequest = (routeId, method = 'get') => {
+  return async ({
+    params,
+    request
+  }) => {
+    const url = getRequestUrl({
+      params,
+      request,
+      routeId
+    });
+
+    try {
+      const res = await fetch(url, {
+        method,
+        signal: request.signal
+      });
+      return res;
+    } catch (error) {
+      console.error(error);
+      throw error;
+    }
+  };
+};

package/dist/js/modern/cli/generate-client.js

@@ -0,0 +1,23 @@
+import path from 'path';
+import { getRouteId } from '@modern-js/utils';
+export const generateClient = ({
+  basedir,
+  filename
+}) => {
+  // TODO: loader 的约定变更
+  const componentPath = path.join(path.dirname(filename), 'layout.ts');
+  const routeId = getRouteId(componentPath, basedir);
+  const requestCreatorPath = path.join(__dirname, './create-request').replace('node', 'treeshaking').replace(/\\/g, '/');
+  const importCode = `
+    import { createRequest } from '${requestCreatorPath}';
+  `;
+  const requestCode = `
+    const loader = createRequest('${routeId}');
+    export default loader;
+    export { loader };
+  `;
+  return `
+    ${importCode}
+    ${requestCode}
+  `;
+};

package/dist/js/modern/cli/loader.js

@@ -0,0 +1,21 @@
+// eslint-disable-next-line eslint-comments/disable-enable-pair
+
+/* eslint-disable @babel/no-invalid-this */
+import { generateClient } from "./generate-client";
+export default async function loader(source) {
+  var _this$_compiler;
+
+  this.cacheable();
+  const target = (_this$_compiler = this._compiler) === null || _this$_compiler === void 0 ? void 0 : _this$_compiler.options.target;
+
+  if (target === 'node') {
+    return source;
+  }
+
+  const options = this.getOptions();
+  const code = generateClient({
+    basedir: options.routesDir,
+    filename: this.resourcePath
+  });
+  return code;
+}

package/dist/js/modern/server/index.js

@@ -0,0 +1,217 @@
+function ownKeys(object, enumerableOnly) { var keys = Object.keys(object); if (Object.getOwnPropertySymbols) { var symbols = Object.getOwnPropertySymbols(object); enumerableOnly && (symbols = symbols.filter(function (sym) { return Object.getOwnPropertyDescriptor(object, sym).enumerable; })), keys.push.apply(keys, symbols); } return keys; }
+
+function _objectSpread(target) { for (var i = 1; i < arguments.length; i++) { var source = null != arguments[i] ? arguments[i] : {}; i % 2 ? ownKeys(Object(source), !0).forEach(function (key) { _defineProperty(target, key, source[key]); }) : Object.getOwnPropertyDescriptors ? Object.defineProperties(target, Object.getOwnPropertyDescriptors(source)) : ownKeys(Object(source)).forEach(function (key) { Object.defineProperty(target, key, Object.getOwnPropertyDescriptor(source, key)); }); } return target; }
+
+function _defineProperty(obj, key, value) { if (key in obj) { Object.defineProperty(obj, key, { value: value, enumerable: true, configurable: true, writable: true }); } else { obj[key] = value; } return obj; }
+
+import { installGlobals, writeReadableStreamToWritable, Response as NodeResponse } from '@remix-run/node';
+import { matchRoutes } from 'react-router-dom';
+// Polyfill Web Fetch API
+installGlobals();
+const LOADER_SEARCH_PARAM = '_loader';
+const redirectStatusCodes = new Set([301, 302, 303, 307, 308]);
+export function isRedirectResponse(response) {
+  return redirectStatusCodes.has(response.status);
+}
+export function isResponse(value) {
+  return value != null && typeof value.status === 'number' && typeof value.statusText === 'string' && typeof value.headers === 'object' && typeof value.body !== 'undefined';
+}
+
+const json = (data, init = {}) => {
+  const responseInit = typeof init === 'number' ? {
+    status: init
+  } : init;
+  const headers = new Headers(responseInit.headers);
+
+  if (!headers.has('Content-Type')) {
+    headers.set('Content-Type', 'application/json; charset=utf-8');
+  }
+
+  return new NodeResponse(JSON.stringify(data), _objectSpread(_objectSpread({}, responseInit), {}, {
+    headers
+  }));
+}; // TODO: 添加 context
+
+
+const callRouteLoader = async ({
+  routeId,
+  loader,
+  params,
+  request,
+  // eslint-disable-next-line @typescript-eslint/no-unused-vars
+  loadContext
+}) => {
+  if (!loader) {
+    throw new Error(`You made a ${request.method} request to ${request.url} but did not provide ` + `a default component or \`loader\` for route "${routeId}", ` + `so there is no way to handle the request.`);
+  }
+
+  let result;
+
+  try {
+    result = await loader({
+      request,
+      params
+    });
+  } catch (error) {
+    if (!isResponse(error)) {
+      throw error;
+    }
+
+    result = error;
+  }
+
+  if (result === undefined) {
+    throw new Error(`You defined a loader for route "${routeId}" but didn't return ` + `anything from your \`loader\` function. Please return a value or \`null\`.`);
+  }
+
+  return isResponse(result) ? result : json(result);
+};
+
+const createLoaderHeaders = requestHeaders => {
+  const headers = new Headers();
+
+  for (const [key, values] of Object.entries(requestHeaders)) {
+    if (values) {
+      if (Array.isArray(values)) {
+        for (const value of values) {
+          headers.append(key, value);
+        }
+      } else {
+        headers.set(key, values);
+      }
+    }
+  }
+
+  return headers;
+};
+
+const createLoaderRequest = context => {
+  const origin = `${context.protocol}://${context.host}`; // eslint-disable-next-line node/no-unsupported-features/node-builtins, node/prefer-global/url
+
+  const url = new URL(context.url, origin);
+  const controller = new AbortController();
+  const init = {
+    method: context.method,
+    headers: createLoaderHeaders(context.headers),
+    signal: controller.signal
+  };
+  return new Request(url.href, init);
+};
+
+const sendLoaderResponse = async (res, nodeResponse) => {
+  res.statusMessage = nodeResponse.statusText;
+  res.statusCode = nodeResponse.status;
+
+  for (const [key, value] of nodeResponse.headers.entries()) {
+    res.setHeader(key, value);
+  }
+
+  if (nodeResponse.body) {
+    await writeReadableStreamToWritable(nodeResponse.body, res);
+  } else {
+    res.end();
+  }
+};
+
+export const getPathWithoutEntry = (pathname, entryPath) => {
+  if (entryPath === '/') {
+    return pathname;
+  }
+
+  return pathname.replace(entryPath, '');
+};
+
+const matchEntry = (pathname, entries) => {
+  return entries.find(entry => pathname.startsWith(entry.urlPath));
+};
+
+export const handleRequest = async ({
+  context,
+  serverRoutes,
+  distDir
+}) => {
+  const {
+    method,
+    query
+  } = context;
+  const routeId = query[LOADER_SEARCH_PARAM];
+
+  if (!routeId || method.toLowerCase() !== 'get') {
+    return;
+  }
+
+  const entry = matchEntry(context.path, serverRoutes);
+
+  if (!entry) {
+    return;
+  }
+
+  const {
+    routes
+  } = await import(`${distDir}/loader-routes/${entry.entryName}`);
+
+  if (!routes) {
+    return;
+  }
+
+  const {
+    res
+  } = context;
+  const pathname = getPathWithoutEntry(context.path, entry.urlPath);
+  const matches = matchRoutes(routes, pathname);
+
+  if (!matches) {
+    res.statusCode = 403;
+    res.end(`Route ${pathname} was not matched`);
+    return;
+  }
+
+  const match = matches === null || matches === void 0 ? void 0 : matches.find(match => match.route.id === routeId);
+
+  if (!match) {
+    res.statusCode = 403;
+    res.end(`Route ${routeId} does not match URL ${context.path}`);
+    return;
+  }
+
+  const request = createLoaderRequest(context);
+  let response;
+
+  try {
+    response = await callRouteLoader({
+      loader: match.route.loader,
+      routeId: match.route.id,
+      params: match.params,
+      request,
+      loadContext: {}
+    }); // TODO: 处理 redirect
+  } catch (error) {
+    const message = String(error);
+    response = new NodeResponse(message, {
+      status: 500,
+      headers: {
+        'Content-Type': 'text/plain'
+      }
+    });
+  }
+
+  sendLoaderResponse(res, response);
+};
+export default (() => ({
+  name: '@modern-js/plugin-data-loader',
+  setup: () => ({
+    preparebeforeRouteHandler({
+      serverRoutes,
+      distDir
+    }) {
+      return async context => {
+        return handleRequest({
+          serverRoutes,
+          distDir,
+          context
+        });
+      };
+    }
+
+  })
+}));

package/dist/js/node/cli/create-request.js

@@ -0,0 +1,57 @@
+"use strict";
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.getRequestUrl = exports.createRequest = void 0;
+
+var _pathToRegexp = require("path-to-regexp");
+
+// eslint-disable-next-line eslint-comments/disable-enable-pair
+
+/* eslint-disable node/prefer-global/url */
+// eslint-disable-next-line eslint-comments/disable-enable-pair
+
+/* eslint-disable node/no-unsupported-features/node-builtins */
+const getRequestUrl = ({
+  params,
+  request,
+  routeId
+}) => {
+  const url = new URL(request.url);
+  const toPath = (0, _pathToRegexp.compile)(url.pathname, {
+    encode: encodeURIComponent
+  });
+  const newPathName = toPath(params);
+  url.pathname = newPathName;
+  url.searchParams.append('_loader', routeId);
+  return url;
+};
+
+exports.getRequestUrl = getRequestUrl;
+
+const createRequest = (routeId, method = 'get') => {
+  return async ({
+    params,
+    request
+  }) => {
+    const url = getRequestUrl({
+      params,
+      request,
+      routeId
+    });
+
+    try {
+      const res = await fetch(url, {
+        method,
+        signal: request.signal
+      });
+      return res;
+    } catch (error) {
+      console.error(error);
+      throw error;
+    }
+  };
+};
+
+exports.createRequest = createRequest;

package/dist/js/node/cli/generate-client.js

@@ -0,0 +1,39 @@
+"use strict";
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.generateClient = void 0;
+
+var _path = _interopRequireDefault(require("path"));
+
+var _utils = require("@modern-js/utils");
+
+function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; }
+
+const generateClient = ({
+  basedir,
+  filename
+}) => {
+  // TODO: loader 的约定变更
+  const componentPath = _path.default.join(_path.default.dirname(filename), 'layout.ts');
+
+  const routeId = (0, _utils.getRouteId)(componentPath, basedir);
+
+  const requestCreatorPath = _path.default.join(__dirname, './create-request').replace('node', 'treeshaking').replace(/\\/g, '/');
+
+  const importCode = `
+    import { createRequest } from '${requestCreatorPath}';
+  `;
+  const requestCode = `
+    const loader = createRequest('${routeId}');
+    export default loader;
+    export { loader };
+  `;
+  return `
+    ${importCode}
+    ${requestCode}
+  `;
+};
+
+exports.generateClient = generateClient;

package/dist/js/node/cli/loader.js

@@ -0,0 +1,29 @@
+"use strict";
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.default = loader;
+
+var _generateClient = require("./generate-client");
+
+// eslint-disable-next-line eslint-comments/disable-enable-pair
+
+/* eslint-disable @babel/no-invalid-this */
+async function loader(source) {
+  var _this$_compiler;
+
+  this.cacheable();
+  const target = (_this$_compiler = this._compiler) === null || _this$_compiler === void 0 ? void 0 : _this$_compiler.options.target;
+
+  if (target === 'node') {
+    return source;
+  }
+
+  const options = this.getOptions();
+  const code = (0, _generateClient.generateClient)({
+    basedir: options.routesDir,
+    filename: this.resourcePath
+  });
+  return code;
+}