feat: use unpkg to load prettier, load parsers only when needed

Author: SebastiaanYN

README.md

@@ -1,19 +1,3 @@
 # web-beautify
 
 Beautify languages on the web through web workers.
-
-## Supported languages
-
-- JavaScript
-- TypeScript
-- CSS
-- SCSS
-- Less
-- JSON
-- JSON5
-- GraphQL
-- Markdown
-- HTML
-- Vue
-- YAML
-- PHP

examples/src/index.js

@@ -8,5 +8,5 @@ worker.onmessage = (e) => {
 
 worker.postMessage({
   source: 'const \n x \n = (((\n 5 \n + \n 10)))',
-  language: 'javascript',
+  language: 'babel',
 });

package-lock.json

@@ -1,15 +1,11 @@
 {
   "name": "@sourcebin/web-beautify",
-  "version": "0.0.1",
+  "version": "0.0.2",
   "main": "src/index.js",
   "scripts": {
     "lint": "eslint --ignore-path .gitignore .",
     "test": "npm run lint"
   },
-  "dependencies": {
-    "@prettier/plugin-php": "^0.13.0",
-    "prettier": "^1.19.1"
-  },
   "devDependencies": {
     "@syntek/eslint-config-syntek": "^2.0.2",
     "eslint": "^6.8.0",

package.json

@@ -1,14 +1,14 @@
-import * as prettier from 'prettier/standalone';
+/* globals prettier */
 
+import { unpkgPrettier } from './unpkg.js';
 import { parsers } from './parsers.js';
 
-export async function beautify(source, language) {
-  const parser = parsers[language];
-  const plugins = await Promise.all(parser.import());
+unpkgPrettier('standalone.js');
 
+export function beautify(source, language) {
   return prettier.format(source, {
-    plugins,
-    parser: parser.name,
+    parser: language,
+    plugins: [{ parsers }],
     singleQuote: true,
   });
 }

src/index.js

@@ -1,58 +1,163 @@
-function prettier(...names) {
-  return () => names.map(name => import(`prettier/parser-${name}.js`));
+/* eslint-disable no-underscore-dangle */
+/* globals prettierPlugins */
+
+import { unpkgPrettier } from './unpkg.js';
+
+function prettier(name) {
+  return unpkgPrettier(`parser-${name}.js`);
 }
 
+// https://github.com/prettier/prettier/blob/a093bb3f7b9f59d8cbaf7e20f97f6fafceaef21b/website/static/worker.js#L13-L146
 export const parsers = {
-  javascript: {
-    name: 'babel',
-    import: prettier('babylon'),
+  // JS - Babel
+  get babel() {
+    prettier('babylon');
+    return prettierPlugins.babylon.parsers.babel;
+  },
+
+  get 'babel-flow'() {
+    prettier('babylon');
+    return prettierPlugins.babylon.parsers['babel-flow'];
+  },
+
+  // backward compatibility
+  get babylon() {
+    prettier('babylon');
+    return prettierPlugins.babylon.parsers.babylon;
+  },
+
+  get json() {
+    prettier('babylon');
+    return prettierPlugins.babylon.parsers.json;
+  },
+
+  get json5() {
+    prettier('babylon');
+    return prettierPlugins.babylon.parsers.json5;
+  },
+
+  get 'json-stringify'() {
+    prettier('babylon');
+    return prettierPlugins.babylon.parsers['json-stringify'];
+  },
+
+  get __js_expression() {
+    prettier('babylon');
+    return prettierPlugins.babylon.parsers.__js_expression;
+  },
+
+  get __vue_expression() {
+    prettier('babylon');
+    return prettierPlugins.babylon.parsers.__vue_expression;
+  },
+
+  get __vue_event_binding() {
+    prettier('babylon');
+    return prettierPlugins.babylon.parsers.__vue_event_binding;
+  },
+
+  // JS - Flow
+  get flow() {
+    prettier('flow');
+    return prettierPlugins.flow.parsers.flow;
+  },
+
+  // JS - TypeScript
+  get typescript() {
+    prettier('typescript');
+    return prettierPlugins.typescript.parsers.typescript;
   },
-  typescript: {
-    name: 'typescript',
-    import: prettier('typescript'),
+
+  // JS - Angular Action
+  get __ng_action() {
+    prettier('angular');
+    return prettierPlugins.angular.parsers.__ng_action;
   },
-  css: {
-    name: 'css',
-    import: prettier('postcss'),
+
+  // JS - Angular Binding
+  get __ng_binding() {
+    prettier('angular');
+    return prettierPlugins.angular.parsers.__ng_binding;
   },
-  scss: {
-    name: 'scss',
-    import: prettier('postcss'),
+
+  // JS - Angular Interpolation
+  get __ng_interpolation() {
+    prettier('angular');
+    return prettierPlugins.angular.parsers.__ng_interpolation;
   },
-  less: {
-    name: 'less',
-    import: prettier('postcss'),
+
+  // JS - Angular Directive
+  get __ng_directive() {
+    prettier('angular');
+    return prettierPlugins.angular.parsers.__ng_directive;
   },
-  json: {
-    name: 'json',
-    import: prettier('babylon'),
+
+  // CSS
+  get css() {
+    prettier('postcss');
+    return prettierPlugins.postcss.parsers.css;
   },
-  json5: {
-    name: 'json5',
-    import: prettier('babylon'),
+
+  get less() {
+    prettier('postcss');
+    return prettierPlugins.postcss.parsers.css;
   },
-  graphql: {
-    name: 'graphql',
-    import: prettier('graphql'),
+
+  get scss() {
+    prettier('postcss');
+    return prettierPlugins.postcss.parsers.css;
   },
-  markdown: {
-    name: 'markdown',
-    import: prettier('markdown'),
+
+  // GraphQL
+  get graphql() {
+    prettier('graphql');
+    return prettierPlugins.graphql.parsers.graphql;
   },
-  html: {
-    name: 'html',
-    import: prettier('html', 'babylon', 'postcss'),
+
+  // Markdown
+  get markdown() {
+    prettier('markdown');
+    return prettierPlugins.markdown.parsers.remark;
   },
-  vue: {
-    name: 'vue',
-    import: prettier('html', 'babylon', 'postcss'),
+
+  get mdx() {
+    prettier('markdown');
+    return prettierPlugins.markdown.parsers.mdx;
   },
-  yaml: {
-    name: 'yaml',
-    import: prettier('yaml'),
+
+  // YAML
+  get yaml() {
+    prettier('yaml');
+    return prettierPlugins.yaml.parsers.yaml;
+  },
+
+  // Handlebars
+  get glimmer() {
+    prettier('glimmer');
+    return prettierPlugins.glimmer.parsers.glimmer;
+  },
+
+  // HTML
+  get html() {
+    prettier('html');
+    return prettierPlugins.html.parsers.html;
   },
-  php: {
-    name: 'php',
-    import: () => [import('@prettier/plugin-php/standalone')],
+
+  // Vue
+  get vue() {
+    prettier('html');
+    return prettierPlugins.html.parsers.vue;
+  },
+
+  // Angular
+  get angular() {
+    prettier('html');
+    return prettierPlugins.html.parsers.angular;
+  },
+
+  // Lightning Web Components
+  get lwc() {
+    prettier('html');
+    return prettierPlugins.html.parsers.lwc;
   },
 };

src/parsers.js

@@ -0,0 +1,7 @@
+export function unpkg(pkg, version, file) {
+  return importScripts(`https://unpkg.com/${pkg}@${version}/${file}`);
+}
+
+export function unpkgPrettier(file) {
+  return unpkg('prettier', '1.19.1', file);
+}