Merge pull request #402 from penge/esm

Use ES modules

Author: penge

.eslintignore

@@ -1,4 +1,4 @@
-out/*
-jest.config.js
-build.js
-set-client-id.js
+dist/*
+jest.config.ts
+build.ts
+set-client-id.ts

.github/workflows/main.yml

@@ -12,7 +12,7 @@ jobs:
       - uses: actions/checkout@v2
       - uses: actions/setup-node@v2
         with:
-          node-version: '16'
+          node-version: 16
       - run: npm ci
       - run: npm run lint
       - run: npm run test

.gitignore

@@ -1,4 +1,4 @@
 .DS_Store
 .vscode
 node_modules/
-out/
+dist/

README.md

@@ -5,7 +5,7 @@
   <img src="https://badgen.net/github/license/penge/my-notes" />
   <img src="https://badgen.net/chrome-web-store/users/lkeeogfaiembcblonahillacpaabmiop" />
   <br><br>
-  <img src="static/images/my-notes.png" width="760" /><br>
+  <img src="public/images/my-notes.png" width="760" /><br>
   <strong>My Notes</strong> – <a href="https://chrome.google.com/webstore/detail/my-notes/lkeeogfaiembcblonahillacpaabmiop">Chrome extension</a> for simple and fast note-taking
 </p>
 
@@ -88,7 +88,7 @@ Custom theme allows you to customize My Notes styles in many ways.
 
 To use a Custom theme, open Options, select **"Custom"** theme, and click on the **"Customize"** button to start creating your own theme.
 
-To start, paste into the editor content of [<ins>light.css</ins>](static/themes/light.css) or [<ins>dark.css</ins>](static/themes/dark.css).
+To start, paste into the editor content of [<ins>light.css</ins>](public/themes/light.css) or [<ins>dark.css</ins>](public/themes/dark.css).
 Then, modify CSS variables as you like to change background colors, text colors, etc.
 You can add any valid CSS as well to make further changes.
 Click on the **"Save"** button to save the custom theme.
@@ -178,7 +178,7 @@ Develop:
 ```
 $ npm install
 $ export MY_NOTES_CLIENT_ID=<CLIENT_ID>    # needed when developing Google Drive Sync
-$ npm run develop-watch                    # see "out" folder
+$ npm run develop-watch                    # see "dist" folder
 ```
 
 `MY_NOTES_CLIENT_ID` can be created at [<ins>Google Cloud</ins>](https://console.cloud.google.com) / APIs & Services / Credentials / OAuth 2.0 Client IDs.
@@ -198,17 +198,17 @@ $ npm test
 Build:
 
 ```
-$ npm run build   # see "out" folder
+$ npm run build   # see "dist" folder
 ```
 
 <br><br>
 
 ## Folder structure
 
 ```
-env/              # Helpers for environment variables
+env/              # Environment helpers
 
-out/              # Bundled My Notes (excluded from Git)
+dist/             # Bundled My Notes (excluded from Git)
 
 src/
   background/
@@ -255,15 +255,15 @@ src/
   notes.ts          # Main script for notes
   options.ts        # Main script for options
 
-static/           # All static files (images, icons, HTML, CSS) copied to out/
+public/             # All public files (images, icons, HTML, CSS) copied to dist/
 
 
 .editorconfig     # To enforce same editor configuration
 .eslintrc         # To enforce code quality and same coding style with ESLint
 .eslintignore     # Files excluded from ESLint checking
 .gitignore        # Files excluded from Git
 
-jest.config.js    # Jest configuration
+jest.config.ts    # Jest configuration
 tsconfig.json     # Typescript configuration
 
 package-lock.json
@@ -272,6 +272,8 @@ package.json
 LICENSE           # MIT
 manifest.json     # Main extension file
 
+build.ts          # Produces /dist folder
+
 README.md
 ```
 
@@ -334,7 +336,7 @@ After a successful review, the new version is available on Web Store.
 
 Yes, My Notes can be installed manually by downloading it from GitHub, but keep in mind, that Google Drive Sync works only if My Notes is installed from [<ins>Web Store</ins>](https://chrome.google.com/webstore/detail/my-notes/lkeeogfaiembcblonahillacpaabmiop).
 To install My Notes manually, download the zip file of the latest version which you can find [<ins>here</ins>](https://github.com/penge/my-notes/releases). Then, unpack the downloaded file and install NPM packages followed by `npm run build`.
-Finally, open `chrome://extensions` address in Google Chrome and click the **"Load unpacked"** button to load the unpacked extension from your drive by selecting the `out` directory.
+Finally, open `chrome://extensions` address in Google Chrome and click the **"Load unpacked"** button to load the unpacked extension from your drive by selecting the `dist` folder.
 
 <br>
 

build.js renamed to build.ts

@@ -1,20 +1,26 @@
-require("esbuild").build({
+import esbuild from "esbuild";
+
+esbuild.build({
   entryPoints: [
     "./src/background.ts",
     "./src/notes.tsx",
     "./src/options.tsx",
     "./src/themes/custom/custom.tsx",
     ...(process.env.NODE_ENV === "development" ? ["./src/integration/index.ts"] : []),
   ],
+  chunkNames: "chunks/[name]-[hash]",
   bundle: true,
+  outdir: "./dist",
+  outExtension: { ".js": ".mjs" },
+  splitting: true,
+  format: "esm",
   define: {
     "process.env.LOG_LEVEL": '"ALL"',
   },
   loader: {
     ".svg": "text",
   },
   minify: process.env.NODE_ENV === "production",
-  outdir: "./out",
   sourcemap: process.env.NODE_ENV === "development" ? "inline" : false,
   logLevel: "info"
 });

env/set-client-id.js

@@ -0,0 +1,17 @@
+import fs from "fs";
+
+(() => {
+  const manifestPath = process.argv.slice(2)[0];
+  if (!manifestPath) {
+    return;
+  }
+
+  const clientId = process.env.MY_NOTES_CLIENT_ID;
+  if (!clientId) {
+    return;
+  }
+
+  const manifestContent = JSON.parse(fs.readFileSync(manifestPath, "utf8"));
+  manifestContent.oauth2.client_id = clientId;
+  fs.writeFileSync(manifestPath, JSON.stringify(manifestContent, null, 2));
+})();

env/set-client-id.ts

@@ -1,8 +1,12 @@
-module.exports = {
+import type { Config } from "@jest/types";
+
+const config: Config.InitialOptions = {
   preset: "ts-jest",
   testEnvironment: "jsdom",
   testMatch: [
     "**/__tests__/**/*.test.ts?(x)"
   ],
   moduleDirectories: ["node_modules", "src"]
 };
+
+export default config;

jest.config.js renamed to jest.config.ts

@@ -27,7 +27,8 @@
     ]
   },
   "background": {
-    "service_worker": "background.js"
+    "service_worker": "background.mjs",
+    "type": "module"
   },
   "action": {
     "default_icon": "images/icon128.png"
@@ -42,6 +43,6 @@
       "description": "Open My Notes"
     }
   },
-  "minimum_chrome_version": "88",
+  "minimum_chrome_version": "92",
   "offline_enabled": true
 }