Fix theme flickering on page load

- use template.html to create notes.html and options.html
- update README

README.md

@@ -88,10 +88,13 @@ 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>](public/themes/light.css) or [<ins>dark.css</ins>](public/themes/dark.css).
+To start, either copy and paste into the editor the content of [<ins>light.css</ins>](public/themes/light.css) or [<ins>dark.css</ins>](public/themes/dark.css), or use `@import`.
+
+
 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.
+
+Click on the **"Save"** button to save the Custom theme.
 
 <br><br>
 
@@ -227,12 +230,10 @@ src/
                       # - Registers the ways to open My Notes (icon click, keyboard shortcut)
                       # - Registers events to trigger Google Drive Sync from My Notes
 
-  dom/              # Helpers to get DOM elements
+  i18n/             # Internationalization (English)
 
   integration/      # Integration tests for Google Drive Sync
 
-  messages/         # Communication between My Notes and background script
-
   notes/            # Everything related to Notes
                       # - Create/Rename/Delete notes; Note editing, Note saving
                       # - Toolbar
@@ -249,11 +250,14 @@ src/
                       # - Helpers for Chrome Storage
                       # - Default values (Notes, Options)
 
+  svg/              # SVG images for Toolbar
+
   themes/           # Light, Dark, Custom
 
-  background.ts     # Main script for background page
+  background.ts     # Main script for service worker
   notes.ts          # Main script for notes
   options.ts        # Main script for options
+  template.html     # Template for notes.html and options.html
 
 public/             # All public files (images, icons, HTML, CSS) copied to dist/
 
@@ -264,15 +268,17 @@ public/             # All public files (images, icons, HTML, CSS) copied to dist
 .gitignore        # Files excluded from Git
 
 jest.config.ts    # Jest configuration
-tsconfig.json     # Typescript configuration
+jest.setup.ts     # Jest setup
+tsconfig.json     # TypeScript configuration
 
 package-lock.json
 package.json
 
 LICENSE           # MIT
 manifest.json     # Main extension file
 
-build.ts          # Produces /dist folder
+register.js       # Uses ts-node/esm to resolve build.ts
+build.ts          # Produces dist/ folder
 
 README.md
 ```

build.ts

@@ -1,3 +1,4 @@
+import fs from "fs";
 import esbuild from "esbuild";
 
 esbuild.build({
@@ -6,6 +7,7 @@ esbuild.build({
     "./src/notes.tsx",
     "./src/options.tsx",
     "./src/themes/custom/custom.tsx",
+    "./src/themes/init.ts",
     ...(process.env.NODE_ENV === "development" ? ["./src/integration/index.ts"] : []),
   ],
   chunkNames: "chunks/[name]-[hash]",
@@ -23,4 +25,9 @@ esbuild.build({
   minify: process.env.NODE_ENV === "production",
   sourcemap: process.env.NODE_ENV === "development" ? "inline" : false,
   logLevel: "info",
+}).then(() => {
+  const templateString = fs.readFileSync("./src/template.html", "utf8");
+  ["notes", "options"].forEach((page) => {
+    fs.writeFileSync(`./dist/${page}.html`, templateString.replaceAll("{{page}}", page));
+  });
 });

public/themes/shared.css

@@ -10,7 +10,6 @@
 body {
   margin: 0;
   padding: 0;
-  opacity: 0;
   background: var(--background-color);
   color: var(--text-color);
 }

src/notes.tsx

@@ -10,14 +10,12 @@ import {
   Notification,
   RegularFont,
   GoogleFont,
-  Theme,
   NotesObject,
   NotesOrder,
   Sync,
   Message,
   MessageType,
 } from "shared/storage/schema";
-import { setTheme as setThemeCore } from "themes/set-theme";
 
 import Overview from "notes/components/Overview";
 import __Notification from "notes/components/Notification";
@@ -62,7 +60,7 @@ interface NotesProps {
   active: string
 }
 
-const Notes = (): h.JSX.Element => {
+const Notes = (): h.JSX.Element | null => {
   const [os, setOs] = useState<Os | undefined>(undefined);
   const [tabId, setTabId] = useState<number | undefined>(undefined);
   const [initialized, setInitialized] = useState<boolean>(false);
@@ -78,8 +76,6 @@ const Notes = (): h.JSX.Element => {
   const [sidebar, setSidebar] = useState<boolean>(false);
   const [sidebarWidth, setSidebarWidth] = useState<string | undefined>(undefined);
   const [toolbar, setToolbar] = useState<boolean>(false);
-  const [theme, setTheme] = useState<Theme | undefined>(undefined);
-  const [customTheme, setCustomTheme] = useState<string>("");
 
   // Notes
   const [notesProps, setNotesProps] = useState<NotesProps>({
@@ -164,8 +160,6 @@ const Notes = (): h.JSX.Element => {
       setSidebar(local.sidebar);
       setSidebarWidth(local.sidebarWidth);
       setToolbar(local.toolbar);
-      setTheme(local.theme);
-      setCustomTheme(local.customTheme);
 
       // Notes
       const activeFromUrl = getActiveFromUrl();
@@ -209,14 +203,6 @@ const Notes = (): h.JSX.Element => {
         setSize(changes.size.newValue);
       }
 
-      if (changes.theme) {
-        setTheme(changes.theme.newValue);
-      }
-
-      if (changes.customTheme) {
-        setCustomTheme(changes.customTheme.newValue);
-      }
-
       if (changes.notes) {
         const oldNotes: NotesObject = changes.notes.oldValue;
         const newNotes: NotesObject = changes.notes.newValue;
@@ -391,17 +377,6 @@ const Notes = (): h.JSX.Element => {
     document.body.style.left = sidebarWidth ?? "";
   }, [sidebarWidth]);
 
-  // Theme
-  useEffect(() => {
-    // setThemeCore injects one of:
-    // - light.css
-    // - dark.css
-    // - customTheme string
-    if (theme) {
-      setThemeCore(document, { theme, customTheme });
-    }
-  }, [theme, customTheme]);
-
   // Focus
   useEffect(() => {
     document.body.classList.toggle("focus", focus);
@@ -575,6 +550,10 @@ const Notes = (): h.JSX.Element => {
     );
   }
 
+  if (!initialized) {
+    return null;
+  }
+
   return (
     <Fragment>
       {notification && (

src/options.tsx

@@ -20,7 +20,6 @@ import {
   Theme,
   Sync,
 } from "shared/storage/schema";
-import { setTheme as setThemeCore } from "themes/set-theme";
 
 const Options = (): h.JSX.Element | null => {
   const [initialized, setInitialized] = useState<boolean>(false);
@@ -31,7 +30,6 @@ const Options = (): h.JSX.Element | null => {
   const [font, setFont] = useState<RegularFont | GoogleFont | undefined>(undefined);
   const [size, setSize] = useState<number>(0);
   const [theme, setTheme] = useState<Theme | undefined>(undefined);
-  const [customTheme, setCustomTheme] = useState<string>("");
   const [tab, setTab] = useState<boolean>(false);
   const [tabSize, setTabSize] = useState<number>(-1);
   const [openNoteOnMouseHover, setOpenNoteOnMouseHover] = useState<boolean>(false);
@@ -67,7 +65,6 @@ const Options = (): h.JSX.Element | null => {
       setFont(local.font);
       setSize(local.size);
       setTheme(local.theme);
-      setCustomTheme(local.customTheme);
 
       // Notes
       setNotesCount(Object.keys(local.notes).length);
@@ -103,10 +100,6 @@ const Options = (): h.JSX.Element | null => {
         setTheme(changes.theme.newValue);
       }
 
-      if (changes.customTheme) {
-        setCustomTheme(changes.customTheme.newValue);
-      }
-
       if (changes.notes) {
         const { newValue } = changes.notes;
         const newNotesCount = Object.keys(newValue).length;
@@ -139,16 +132,6 @@ const Options = (): h.JSX.Element | null => {
     });
   }, []);
 
-  useEffect(() => {
-    // setThemeCore injects one of:
-    // - light.css
-    // - dark.css
-    // - customTheme string
-    if (theme) {
-      setThemeCore(document, { theme, customTheme });
-    }
-  }, [theme, customTheme]);
-
   if (!initialized) {
     return null;
   }

public/notes.html → src/template.html

@@ -5,10 +5,14 @@
   <meta charset="utf-8">
   <meta name="viewport" content="width=device-width, initial-scale=1.0">
   <title>My Notes</title>
+
   <link rel="stylesheet" href="" id="google-fonts">
   <link rel="stylesheet" href="themes/shared.css">
-  <link rel="stylesheet" href="notes.css">
-  <script type="module" src="notes.mjs"></script>
+  <style id="theme"></style>
+  <link rel="stylesheet" href="{{page}}.css">
+
+  <script src="themes/init.mjs"></script>
+  <script type="module" src="{{page}}.mjs"></script>
 </head>
 
 <body>

src/themes/__tests__/themes.test.ts

@@ -5,21 +5,23 @@ const getLines = (filename: string): string[] => fs
   .readFileSync(path.join(__dirname, `../../../public/themes/${filename}`), "utf8")
   .split("\n");
 
-it("has the same CSS variables", () => {
+describe("themes in public folder", () => {
   const lightLines = getLines("light.css");
   const darkLines = getLines("dark.css");
 
-  // Themes have the same length
-  expect(lightLines.length).toEqual(darkLines.length);
+  test("they have same number of lines", () => {
+    expect(lightLines.length).toEqual(darkLines.length);
+  });
 
-  // Themes have the same lines, variable names
-  for (let i = 0; i < lightLines.length; i += 1) {
-    const isVariable = lightLines[i].startsWith("  --");
-    if (!isVariable) {
-      expect(lightLines[i]).toEqual(darkLines[i]);
-    } else {
-      const variableName = lightLines[i].split(":")[0];
-      expect(darkLines[i].startsWith(variableName)).toBe(true);
+  test("they have same CSS variables", () => {
+    for (let i = 0; i < lightLines.length; i += 1) {
+      const isVariable = lightLines[i].startsWith("  --");
+      if (!isVariable) {
+        expect(lightLines[i]).toEqual(darkLines[i]);
+      } else {
+        const variableName = lightLines[i].split(":")[0];
+        expect(darkLines[i].startsWith(variableName)).toBe(true);
+      }
     }
-  }
+  });
 });