Build now uses prettier/standalone

Author: Janther

.github/workflows/CI.yml

@@ -36,6 +36,8 @@ jobs:
         run: npm install
       - name: Build
         run: npm run build
+      - name: Build test app
+        run: npm run build:test
       - name: Run tests
         run: npm run test:standalone
 
@@ -54,8 +56,10 @@ jobs:
         run: npm run build
       - name: Downgrade Prettier to V2
         run: npm install [email protected]
+      - name: Build test app
+        run: npm run build:test
       - name: Run standalone tests
-        run: npm run test:standalone tests/format tests/unit/prettier-version
+        run: npm run test:standalone tests/format tests/integration tests/unit/prettier-version
 
   test_linux:
     name: Test on Linux with Node ${{ matrix.node }}

README.md

@@ -59,16 +59,41 @@ We follow Prettier's strategy for populating their plugins in the object `pretti
 
 ```html
 <script>
+  async function format(code) {
+    return await prettier.format(code, {
+      parser: "solidity-parse",
+      plugins: [solidityPlugin],
+    });
+  }
+
   const originalCode = 'contract Foo {}';
-  const formattedCode = prettier.format(originalCode, {
-    parser: 'solidity-parse',
-    plugins: prettierPlugins
-  });
+  const formattedCode = format(originalCode);
 </script>
 ```
 
 For more details and please have a look at [Prettier's documentation](https://prettier.io/docs/en/browser.html).
 
+### Creating a package for the Browser
+
+_Added in v1.1.4_
+
+If you are creating your own package to be run in a browser, you might want to import the standalone files directly.
+
+```Javascript
+import prettier from 'prettier/standalone';
+import solidityPlugin from 'prettier-plugin-solidity/standalone';
+
+async function format(code) {
+  return await prettier.format(code, {
+    parser: "solidity-parse",
+    plugins: [solidityPlugin],
+  });
+}
+
+const originalCode = 'contract Foo {}';
+const formattedCode = format(originalCode);
+```
+
 ## Configuration File
 
 Prettier provides a flexible system to configure the formatting rules of a project. For more information please refer to the [documentation](https://prettier.io/docs/en/configuration.html).

jest.config.js

@@ -1,4 +1,13 @@
 const TEST_STANDALONE = Boolean(process.env.TEST_STANDALONE);
+const testMatch = [
+  '<rootDir>/tests/format/**/jsfmt.spec.js',
+
+  '<rootDir>/tests/unit/**/*.test.js'
+];
+
+if (TEST_STANDALONE) {
+  testMatch.push('<rootDir>/tests/integration/**/*.test.js');
+}
 
 export default {
   runner: 'jest-light-runner',
@@ -17,10 +26,7 @@ export default {
         'tests/format/RespectDefaultOptions'
       ]
     : [],
-  testMatch: [
-    '<rootDir>/tests/format/**/jsfmt.spec.js',
-    '<rootDir>/tests/unit/**/*.test.js'
-  ],
+  testMatch,
   transform: {},
   watchPlugins: [
     'jest-watch-typeahead/filename',

package.json

@@ -7,12 +7,18 @@
   "browser": "./dist/standalone.cjs",
   "unpkg": "./dist/standalone.cjs",
   "exports": {
-    "import": "./src/index.js",
-    "require": "./dist/standalone.cjs"
+    ".": {
+      "import": "./src/index.js",
+      "require": "./dist/standalone.cjs"
+    },
+    "./standalone": {
+      "default": "./dist/standalone.cjs"
+    }
   },
   "scripts": {
     "build": "webpack --env production",
     "build:dev": "webpack --env development",
+    "build:test": "webpack --config test.config.js",
     "eslint": "eslint 'src/**' 'tests/**'",
     "lint": "npm run eslint && npm run prettier -- --list-different",
     "lint:fix": "npm run eslint -- --fix && npm run prettier -- --write",

test.config.js

@@ -0,0 +1,43 @@
+import path from 'node:path';
+// eslint-disable-next-line import/no-extraneous-dependencies
+import createEsmUtils from 'esm-utils';
+
+const { __dirname } = createEsmUtils(import.meta);
+
+// This is the production and development configuration.
+// It is focused on developer experience, fast rebuilds, and a minimal bundle.
+export default {
+  entry: './tests/integration/test-app.js',
+  mode: 'production',
+  bail: true,
+
+  optimization: { minimize: false },
+  target: ['browserslist'],
+
+  output: {
+    filename: 'test.cjs',
+    path: path.resolve(__dirname, 'dist'),
+    globalObject: `
+      typeof globalThis !== "undefined"
+        ? globalThis
+        : typeof global !== "undefined"
+        ? global
+        : typeof self !== "undefined"
+        ? self
+        : this || {}
+    `,
+    library: {
+      export: 'default',
+      name: {
+        commonjs: 'format',
+        root: 'format'
+      },
+      type: 'umd2'
+    }
+  },
+
+  performance: {
+    maxEntrypointSize: 1024 * 1024,
+    maxAssetSize: 1024 * 1024
+  }
+};

tests/integration/node.test.js

@@ -0,0 +1,7 @@
+import format from '../../dist/test.cjs';
+
+test('Should run a a test app in a node environment', async () => {
+  const data = 'contract    CheckPackage {}';
+
+  expect(await format(data)).toEqual('contract CheckPackage {}\n');
+});

tests/integration/sandbox-test-app.cjs

@@ -0,0 +1,16 @@
+const path = require('path');
+const vm = require('vm');
+const createSandBox = require('../config/utils/create-sandbox.cjs');
+
+const sandbox = createSandBox({
+  files: [path.join(__dirname, '../../dist/test.cjs')]
+});
+
+module.exports = {
+  format(input) {
+    return vm.runInNewContext('format($$$input);', {
+      $$$input: input,
+      ...sandbox
+    });
+  }
+};

tests/integration/sandbox.test.js

@@ -0,0 +1,8 @@
+test('Should run a a test app in a sandbox', async () => {
+  const data = 'contract    CheckPackage {}';
+  const entry = new URL('./sandbox-test-app.cjs', import.meta.url);
+
+  const { format } = await import(entry).then((module) => module.default);
+
+  expect(await format(data)).toEqual('contract CheckPackage {}\n');
+});

tests/integration/test-app.js

@@ -0,0 +1,10 @@
+import prettier from 'prettier/standalone';
+import solidityPlugin from '../../dist/standalone.cjs';
+
+export default async function format(code) {
+  const formattedCode = await prettier.format(code, {
+    parser: 'solidity-parse',
+    plugins: [solidityPlugin]
+  });
+  return formattedCode;
+}

tests/unit/prettier-version/proxyquire-plugin.cjs

@@ -1,11 +1,11 @@
 const proxyquire = require('proxyquire');
-const prettier = require('prettier/standalone.js');
+const prettier = require('prettier/standalone');
 
 const proxyquirePlugin = () => {
   const prettierMock = { ...prettier, version: '2.2.1', '@global': true };
 
   const plugin = proxyquire('../../../dist/standalone.cjs', {
-    prettier: prettierMock
+    'prettier/standalone': prettierMock
   });
 
   return { plugin, prettierMock };