@modern-js/plugin-polyfill 1.0.0-alpha.3

package/CHANGELOG.md

@@ -0,0 +1,9 @@
+# @modern-js/plugin-polyfill
+
+## 1.0.0-alpha.3
+### Patch Changes
+
+- feat: initial
+- Updated dependencies [undefined]
+  - @modern-js/core@1.0.0-alpha.3
+  - @modern-js/server-plugin@1.0.0-alpha.3

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,32 @@
+
+<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 工程体系</p>
+
+## 背景
+- [迈入现代 Web 开发](https://zhuanlan.zhihu.com/p/386607009)
+- [现代 Web 开发者问卷调查报告](https://zhuanlan.zhihu.com/p/403206195)
+
+## 计划
+
+Modern.js 的 1.0.0.rc 版已经发到 npm，目前在做测试改进，README 文档之后统一提供（现阶段加入测试和开发，可以发 [issue](https://github.com/modern-js-dev/modern.js/issues) 留微信联系），完整的文档站计划在10月14日上线
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+

package/dist/js/modern/cli.js

@@ -0,0 +1,25 @@
+import { createPlugin, useResolvedConfigContext } from '@modern-js/core';
+import { defaultPolyfill } from "./const";
+export default createPlugin(() => ({
+  htmlPartials({
+    entrypoint,
+    partials
+  }) {
+    // eslint-disable-next-line react-hooks/rules-of-hooks
+    const {
+      value: resolvedConfig
+    } = useResolvedConfigContext();
+
+    if (resolvedConfig.output.polyfill === 'ua') {
+      partials.top.push(`<script src="${defaultPolyfill}" crossorigin></script>`);
+    }
+
+    return {
+      partials,
+      entrypoint
+    };
+  }
+
+}), {
+  name: '@modern-js/plugin-polyfill'
+});

package/dist/js/modern/const.js

@@ -0,0 +1,6 @@
+export const defaultPolyfill = '/__polyfill__';
+export const defaultFeatures = {
+  es6: {
+    flags: ['gated']
+  }
+};

package/dist/js/modern/index.js

@@ -0,0 +1,56 @@
+import { createPlugin } from '@modern-js/server-plugin';
+import { getPolyfillString } from '@modern-js/polyfill-lib';
+import mime from 'mime-types';
+import Parser from 'ua-parser-js';
+import { defaultFeatures, defaultPolyfill } from "./const";
+import PolyfillCache, { generateCacheKey } from "./libs/cache";
+export default createPlugin(() => ({
+  preServerInit(_) {
+    const cache = new PolyfillCache();
+    const route = defaultPolyfill;
+    const features = defaultFeatures;
+    const minify = process.env.NODE_ENV === 'production';
+    const featureDig = Object.keys(features).map(name => {
+      const {
+        flags = ['gated']
+      } = features[name];
+      const flagStr = flags.join(',');
+      return `${name}-${flagStr}`;
+    }).join(',');
+    return async (context, next) => {
+      if (context.url !== route) {
+        return next();
+      }
+
+      const parsedUA = Parser(context.headers['user-agent']);
+      const {
+        name = '',
+        version = ''
+      } = parsedUA.browser;
+      const cacheKey = generateCacheKey({
+        name,
+        version,
+        features: featureDig,
+        minify
+      });
+      const matched = cache.get(cacheKey);
+
+      if (matched) {
+        context.res.setHeader('content-type', mime.contentType('js'));
+        return context.res.end(matched);
+      }
+
+      const polyfill = await getPolyfillString({
+        uaString: context.headers['user-agent'],
+        minify,
+        features
+      });
+      cache.set(cacheKey, polyfill);
+      context.res.setHeader('content-type', mime.contentType('js'));
+      return context.res.end(polyfill);
+    };
+  }
+
+}), {
+  name: '@modern-js/plugin-polyfill'
+});

package/dist/js/modern/libs/cache.js

@@ -0,0 +1,41 @@
+import crypto from 'crypto';
+import LRUCache from 'lru-cache';
+const KB = 1024;
+const MB = 1024 * KB;
+const keyCache = new LRUCache(10000);
+export const generateCacheKey = options => {
+  const {
+    name,
+    version,
+    features,
+    minify
+  } = options;
+  const str = `${name}-${version}-${Number(minify)}-${features}`;
+  const matched = keyCache.get(str);
+
+  if (matched) {
+    return matched;
+  }
+
+  const hash = crypto.createHmac('sha256', '^polyfill$').update(str).digest('hex');
+  keyCache.set(str, hash);
+  return hash;
+};
+export default class Cache {
+  constructor() {
+    this.caches = void 0;
+    this.caches = new LRUCache({
+      max: 200 * MB,
+      length: v => v.length
+    });
+  }
+
+  get(hash) {
+    return this.caches.get(hash);
+  }
+
+  set(hash, content) {
+    this.caches.set(hash, content);
+  }
+
+}

package/dist/js/node/cli.js

@@ -0,0 +1,36 @@
+"use strict";
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.default = void 0;
+
+var _core = require("@modern-js/core");
+
+var _const = require("./const");
+
+var _default = (0, _core.createPlugin)(() => ({
+  htmlPartials({
+    entrypoint,
+    partials
+  }) {
+    // eslint-disable-next-line react-hooks/rules-of-hooks
+    const {
+      value: resolvedConfig
+    } = (0, _core.useResolvedConfigContext)();
+
+    if (resolvedConfig.output.polyfill === 'ua') {
+      partials.top.push(`<script src="${_const.defaultPolyfill}" crossorigin></script>`);
+    }
+
+    return {
+      partials,
+      entrypoint
+    };
+  }
+
+}), {
+  name: '@modern-js/plugin-polyfill'
+});
+
+exports.default = _default;

package/dist/js/node/const.js

@@ -0,0 +1,14 @@
+"use strict";
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.defaultPolyfill = exports.defaultFeatures = void 0;
+const defaultPolyfill = '/__polyfill__';
+exports.defaultPolyfill = defaultPolyfill;
+const defaultFeatures = {
+  es6: {
+    flags: ['gated']
+  }
+};
+exports.defaultFeatures = defaultFeatures;

package/dist/js/node/index.js

@@ -0,0 +1,77 @@
+"use strict";
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.default = void 0;
+
+var _serverPlugin = require("@modern-js/server-plugin");
+
+var _polyfillLib = require("@modern-js/polyfill-lib");
+
+var _mimeTypes = _interopRequireDefault(require("mime-types"));
+
+var _uaParserJs = _interopRequireDefault(require("ua-parser-js"));
+
+var _const = require("./const");
+
+var _cache = _interopRequireWildcard(require("./libs/cache"));
+
+function _getRequireWildcardCache(nodeInterop) { if (typeof WeakMap !== "function") return null; var cacheBabelInterop = new WeakMap(); var cacheNodeInterop = new WeakMap(); return (_getRequireWildcardCache = function (nodeInterop) { return nodeInterop ? cacheNodeInterop : cacheBabelInterop; })(nodeInterop); }
+
+function _interopRequireWildcard(obj, nodeInterop) { if (!nodeInterop && obj && obj.__esModule) { return obj; } if (obj === null || typeof obj !== "object" && typeof obj !== "function") { return { default: obj }; } var cache = _getRequireWildcardCache(nodeInterop); if (cache && cache.has(obj)) { return cache.get(obj); } var newObj = {}; var hasPropertyDescriptor = Object.defineProperty && Object.getOwnPropertyDescriptor; for (var key in obj) { if (key !== "default" && Object.prototype.hasOwnProperty.call(obj, key)) { var desc = hasPropertyDescriptor ? Object.getOwnPropertyDescriptor(obj, key) : null; if (desc && (desc.get || desc.set)) { Object.defineProperty(newObj, key, desc); } else { newObj[key] = obj[key]; } } } newObj.default = obj; if (cache) { cache.set(obj, newObj); } return newObj; }
+
+function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; }
+
+var _default = (0, _serverPlugin.createPlugin)(() => ({
+  preServerInit(_) {
+    const cache = new _cache.default();
+    const route = _const.defaultPolyfill;
+    const features = _const.defaultFeatures;
+    const minify = process.env.NODE_ENV === 'production';
+    const featureDig = Object.keys(features).map(name => {
+      const {
+        flags = ['gated']
+      } = features[name];
+      const flagStr = flags.join(',');
+      return `${name}-${flagStr}`;
+    }).join(',');
+    return async (context, next) => {
+      if (context.url !== route) {
+        return next();
+      }
+
+      const parsedUA = (0, _uaParserJs.default)(context.headers['user-agent']);
+      const {
+        name = '',
+        version = ''
+      } = parsedUA.browser;
+      const cacheKey = (0, _cache.generateCacheKey)({
+        name,
+        version,
+        features: featureDig,
+        minify
+      });
+      const matched = cache.get(cacheKey);
+
+      if (matched) {
+        context.res.setHeader('content-type', _mimeTypes.default.contentType('js'));
+        return context.res.end(matched);
+      }
+
+      const polyfill = await (0, _polyfillLib.getPolyfillString)({
+        uaString: context.headers['user-agent'],
+        minify,
+        features
+      });
+      cache.set(cacheKey, polyfill);
+      context.res.setHeader('content-type', _mimeTypes.default.contentType('js'));
+      return context.res.end(polyfill);
+    };
+  }
+
+}), {
+  name: '@modern-js/plugin-polyfill'
+});
+
+exports.default = _default;

package/dist/js/node/libs/cache.js

@@ -0,0 +1,59 @@
+"use strict";
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.generateCacheKey = exports.default = void 0;
+
+var _crypto = _interopRequireDefault(require("crypto"));
+
+var _lruCache = _interopRequireDefault(require("lru-cache"));
+
+function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; }
+
+const KB = 1024;
+const MB = 1024 * KB;
+const keyCache = new _lruCache.default(10000);
+
+const generateCacheKey = options => {
+  const {
+    name,
+    version,
+    features,
+    minify
+  } = options;
+  const str = `${name}-${version}-${Number(minify)}-${features}`;
+  const matched = keyCache.get(str);
+
+  if (matched) {
+    return matched;
+  }
+
+  const hash = _crypto.default.createHmac('sha256', '^polyfill$').update(str).digest('hex');
+
+  keyCache.set(str, hash);
+  return hash;
+};
+
+exports.generateCacheKey = generateCacheKey;
+
+class Cache {
+  constructor() {
+    this.caches = void 0;
+    this.caches = new _lruCache.default({
+      max: 200 * MB,
+      length: v => v.length
+    });
+  }
+
+  get(hash) {
+    return this.caches.get(hash);
+  }
+
+  set(hash, content) {
+    this.caches.set(hash, content);
+  }
+
+}
+
+exports.default = Cache;

package/dist/types/cli.d.ts

@@ -0,0 +1,15 @@
+declare const _default: import("@modern-js/plugin").AsyncPlugin<Partial<import("@modern-js/plugin").Progresses2Threads<{
+  config: import("@modern-js/plugin").ParallelWorkflow<void, unknown>;
+  validateSchema: import("@modern-js/plugin").ParallelWorkflow<void, unknown>;
+  prepare: import("@modern-js/plugin").AsyncWorkflow<void, void>;
+  commands: import("@modern-js/plugin").AsyncWorkflow<{
+    program: import("commander").Command;
+  }, void>;
+  watchFiles: import("@modern-js/plugin").ParallelWorkflow<void, unknown>;
+  fileChange: import("@modern-js/plugin").AsyncWorkflow<{
+    filename: string;
+  }, void>;
+  beforeExit: import("@modern-js/plugin").AsyncWorkflow<void, void>;
+} & import("@modern-js/plugin").ClearDraftProgress<import("@modern-js/core").Hooks>>>>;
+
+export default _default;

package/dist/types/const.d.ts

@@ -0,0 +1,4 @@
+export declare const defaultPolyfill = "/__polyfill__";
+export declare const defaultFeatures: Record<string, {
+  flags: string[];
+}>;

package/dist/types/index.d.ts

@@ -0,0 +1,3 @@
+declare const _default: any;
+
+export default _default;

package/dist/types/libs/cache.d.ts

@@ -0,0 +1,14 @@
+declare type CacheQueryOptions = {
+  features: string;
+  minify: boolean;
+  name: string;
+  version: string;
+};
+export declare const generateCacheKey: (options: CacheQueryOptions) => string;
+export default class Cache {
+  private readonly caches;
+  constructor();
+  get(hash: string): string | undefined;
+  set(hash: string, content: string): void;
+}
+export {};

package/dist/types/type.d.ts

@@ -0,0 +1,9 @@
+export declare type ServerPolyfill = {
+  polyfill: {
+    route: string;
+    features: Record<string, {
+      flags: string[];
+    }>;
+    minify: boolean;
+  };
+};

package/modern.config.js

@@ -0,0 +1,2 @@
+/** @type {import('@modern-js/module-tools').UserConfig} */
+module.exports = {};

package/package.json

@@ -0,0 +1,59 @@
+{
+  "name": "@modern-js/plugin-polyfill",
+  "version": "1.0.0-alpha.3",
+  "jsnext:source": "./src/index.ts",
+  "types": "./dist/types/index.d.ts",
+  "main": "./dist/js/node/index.js",
+  "module": "./dist/js/treeshaking/index.js",
+  "jsnext:modern": "./dist/js/modern/index.js",
+  "exports": {
+    ".": {
+      "node": {
+        "import": "./dist/js/modern/index.js",
+        "require": "./dist/js/node/index.js"
+      },
+      "default": "./dist/js/treeshaking/index.js"
+    },
+    "./cli": {
+      "node": {
+        "import": "./dist/js/node/cli.js",
+        "require": "./dist/js/node/cli.js"
+      },
+      "default": "./dist/js/node/cli.js"
+    }
+  },
+  "dependencies": {
+    "@babel/runtime": "^7",
+    "@modern-js/core": "^1.0.0-alpha.3",
+    "@modern-js/polyfill-lib": "^1.0.0-rc.0",
+    "@modern-js/server-plugin": "^1.0.0-alpha.3",
+    "lru-cache": "^6.0.0",
+    "mime-types": "^2.1.32",
+    "ua-parser-js": "^0.7.28"
+  },
+  "devDependencies": {
+    "@modern-js/types": "^1.0.0-alpha.3",
+    "@types/jest": "^26",
+    "@types/lru-cache": "^5.1.1",
+    "@types/mime-types": "^2.1.1",
+    "@types/node": "^14",
+    "@types/react": "^17",
+    "@types/react-dom": "^17",
+    "@types/ua-parser-js": "^0.7.36",
+    "typescript": "^4",
+    "@modern-js/plugin-testing": "^1.0.0-alpha.3",
+    "@modern-js/module-tools": "^1.0.0-alpha.3"
+  },
+  "sideEffects": false,
+  "modernConfig": {
+    "output": {
+      "packageMode": "node-js"
+    }
+  },
+  "scripts": {
+    "new": "modern new",
+    "build": "modern build",
+    "dev": "modern build --watch",
+    "test": "modern test --passWithNoTests"
+  }
+}

package/src/cli.ts

@@ -0,0 +1,20 @@
+import { createPlugin, useResolvedConfigContext } from '@modern-js/core';
+import { defaultPolyfill } from './const';
+
+export default createPlugin(
+  () =>
+    ({
+      htmlPartials({ entrypoint, partials }: any) {
+        // eslint-disable-next-line react-hooks/rules-of-hooks
+        const { value: resolvedConfig } = useResolvedConfigContext();
+        if (resolvedConfig.output.polyfill === 'ua') {
+          partials.top.push(
+            `<script src="${defaultPolyfill}" crossorigin></script>`,
+          );
+        }
+
+        return { partials, entrypoint };
+      },
+    } as any),
+  { name: '@modern-js/plugin-polyfill' },
+);

package/src/const.ts

@@ -0,0 +1,5 @@
+export const defaultPolyfill = '/__polyfill__';
+
+export const defaultFeatures: Record<string, { flags: string[] }> = {
+  es6: { flags: ['gated'] },
+};

package/src/global.d.ts

@@ -0,0 +1,7 @@
+declare module '@modern-js/polyfill-lib' {
+  export const getPolyfillString: (options: {
+    uaString: string;
+    minify: boolean;
+    features: Record<string, { flags: string[] }>;
+  }) => Promise<string>;
+}

package/src/index.ts

@@ -0,0 +1,66 @@
+import { createPlugin } from '@modern-js/server-plugin';
+import { NextFunction, ModernServerContext } from '@modern-js/types/server';
+import type { NormalizedConfig } from '@modern-js/core';
+import { getPolyfillString } from '@modern-js/polyfill-lib';
+import mime from 'mime-types';
+import Parser from 'ua-parser-js';
+import { defaultFeatures, defaultPolyfill } from './const';
+import PolyfillCache, { generateCacheKey } from './libs/cache';
+
+export default createPlugin(
+  () => ({
+    preServerInit(_: NormalizedConfig) {
+      const cache = new PolyfillCache();
+      const route = defaultPolyfill;
+      const features = defaultFeatures;
+      const minify = process.env.NODE_ENV === 'production';
+
+      const featureDig = Object.keys(features)
+        .map(name => {
+          const { flags = ['gated'] } = features[name];
+          const flagStr = flags.join(',');
+
+          return `${name}-${flagStr}`;
+        })
+        .join(',');
+
+      return async (context: ModernServerContext, next: NextFunction) => {
+        if (context.url !== route) {
+          return next();
+        }
+
+        const parsedUA = Parser(context.headers['user-agent']);
+        const { name = '', version = '' } = parsedUA.browser;
+
+        const cacheKey = generateCacheKey({
+          name,
+          version,
+          features: featureDig,
+          minify,
+        });
+        const matched = cache.get(cacheKey);
+        if (matched) {
+          context.res.setHeader(
+            'content-type',
+            mime.contentType('js') as string,
+          );
+          return context.res.end(matched);
+        }
+
+        const polyfill = await getPolyfillString({
+          uaString: context.headers['user-agent'] as string,
+          minify,
+          features,
+        });
+
+        cache.set(cacheKey, polyfill);
+
+        context.res.setHeader('content-type', mime.contentType('js') as string);
+        return context.res.end(polyfill);
+      };
+    },
+  }),
+  {
+    name: '@modern-js/plugin-polyfill',
+  },
+) as any;

package/src/libs/cache.ts

@@ -0,0 +1,49 @@
+import crypto from 'crypto';
+import LRUCache from 'lru-cache';
+
+type CacheQueryOptions = {
+  features: string;
+  minify: boolean;
+  name: string;
+  version: string;
+};
+
+const KB = 1024;
+const MB = 1024 * KB;
+
+const keyCache = new LRUCache<string, string>(10000);
+export const generateCacheKey = (options: CacheQueryOptions) => {
+  const { name, version, features, minify } = options;
+
+  const str = `${name}-${version}-${Number(minify)}-${features}`;
+  const matched = keyCache.get(str);
+  if (matched) {
+    return matched;
+  }
+
+  const hash = crypto
+    .createHmac('sha256', '^polyfill$')
+    .update(str)
+    .digest('hex');
+  keyCache.set(str, hash);
+  return hash;
+};
+
+export default class Cache {
+  private readonly caches: LRUCache<string, string>;
+
+  constructor() {
+    this.caches = new LRUCache({
+      max: 200 * MB,
+      length: v => v.length,
+    });
+  }
+
+  public get(hash: string) {
+    return this.caches.get(hash);
+  }
+
+  public set(hash: string, content: string) {
+    this.caches.set(hash, content);
+  }
+}

package/src/type.ts

@@ -0,0 +1,7 @@
+export type ServerPolyfill = {
+  polyfill: {
+    route: string;
+    features: Record<string, { flags: string[] }>;
+    minify: boolean;
+  };
+};

package/tsconfig.json

@@ -0,0 +1,12 @@
+{
+  "extends": "@modern-js/tsconfig/base",
+  "compilerOptions": {
+    "declaration": false,
+    "jsx": "preserve",
+    "baseUrl": "./",
+    "paths": {
+      "@/*": ["./src/*"]
+    }
+  },
+  "include": ["src"]
+}