From 7fa94f3033c9d013da68c1fab79ed3ef5899080f Mon Sep 17 00:00:00 2001 From: Robert Kaussow Date: Tue, 9 Jan 2024 14:29:53 +0100 Subject: [PATCH] chore: rework js imports (#766) --- .eslintrc.json | 15 +++------------ src/js/app.js | 26 -------------------------- src/js/colorTheme.js | 5 ++--- src/js/{copycode.js => index.js} | 28 +++++++++++++++++++++++++++- src/js/katex.js | 9 ++------- src/js/mermaid.js | 6 +++--- src/js/search.js | 10 +++++----- webpack.config.js | 3 ++- 8 files changed, 44 insertions(+), 58 deletions(-) delete mode 100644 src/js/app.js rename src/js/{copycode.js => index.js} (50%) diff --git a/.eslintrc.json b/.eslintrc.json index 1cfcc37..e946021 100644 --- a/.eslintrc.json +++ b/.eslintrc.json @@ -1,22 +1,13 @@ { "env": { "browser": true, - "es6": true, - "amd": true + "es2017": true }, "extends": ["plugin:prettier/recommended"], "parser": "@babel/eslint-parser", "parserOptions": { "sourceType": "module", - "requireConfigFile": false, - "allowImportExportEverywhere": true + "requireConfigFile": false }, - "plugins": ["prettier"], - "rules": { - "require-await": "warn" - }, - "globals": { - "require": false, - "requirejs": false - } + "plugins": ["prettier"] } diff --git a/src/js/app.js b/src/js/app.js deleted file mode 100644 index a8f69ea..0000000 --- a/src/js/app.js +++ /dev/null @@ -1,26 +0,0 @@ -const { createCopyButton } = require("./copycode.js") -const Clipboard = require("clipboard") - -document.addEventListener("DOMContentLoaded", function (event) { - let clipboard = new Clipboard(".clip") - - clipboard.on("success", function (e) { - const trigger = e.trigger - - if (trigger.hasAttribute("data-copy-feedback")) { - trigger.classList.add("gdoc-post__codecopy--success", "gdoc-post__codecopy--out") - trigger.querySelector(".gdoc-icon.copy").classList.add("hidden") - trigger.querySelector(".gdoc-icon.check").classList.remove("hidden") - - setTimeout(function () { - trigger.classList.remove("gdoc-post__codecopy--success", "gdoc-post__codecopy--out") - trigger.querySelector(".gdoc-icon.copy").classList.remove("hidden") - trigger.querySelector(".gdoc-icon.check").classList.add("hidden") - }, 3000) - } - - e.clearSelection() - }) - - document.querySelectorAll(".highlight").forEach((highlightDiv) => createCopyButton(highlightDiv)) -}) diff --git a/src/js/colorTheme.js b/src/js/colorTheme.js index e0c9077..c7fdb18 100644 --- a/src/js/colorTheme.js +++ b/src/js/colorTheme.js @@ -1,6 +1,5 @@ -const Storage = require("store2") -const { TOGGLE_COLOR_THEMES, THEME, COLOR_THEME_AUTO } = require("./config.js") - +import Storage from "store2" +import { TOGGLE_COLOR_THEMES, THEME, COLOR_THEME_AUTO } from "./config.js" ;(() => { applyTheme() })() diff --git a/src/js/copycode.js b/src/js/index.js similarity index 50% rename from src/js/copycode.js rename to src/js/index.js index c48e002..86c0817 100644 --- a/src/js/copycode.js +++ b/src/js/index.js @@ -1,4 +1,30 @@ -export function createCopyButton(highlightDiv) { +import Clipboard from "clipboard" + +document.addEventListener("DOMContentLoaded", function (event) { + let clipboard = new Clipboard(".clip") + + clipboard.on("success", function (e) { + const trigger = e.trigger + + if (trigger.hasAttribute("data-copy-feedback")) { + trigger.classList.add("gdoc-post__codecopy--success", "gdoc-post__codecopy--out") + trigger.querySelector(".gdoc-icon.copy").classList.add("hidden") + trigger.querySelector(".gdoc-icon.check").classList.remove("hidden") + + setTimeout(function () { + trigger.classList.remove("gdoc-post__codecopy--success", "gdoc-post__codecopy--out") + trigger.querySelector(".gdoc-icon.copy").classList.remove("hidden") + trigger.querySelector(".gdoc-icon.check").classList.add("hidden") + }, 3000) + } + + e.clearSelection() + }) + + document.querySelectorAll(".highlight").forEach((highlightDiv) => createCopyButton(highlightDiv)) +}) + +function createCopyButton(highlightDiv) { const button = document.createElement("span") let codeSelector = "pre > code" diff --git a/src/js/katex.js b/src/js/katex.js index a8d4ad9..132638a 100644 --- a/src/js/katex.js +++ b/src/js/katex.js @@ -1,9 +1,4 @@ import "katex/dist/katex.css" +import renderMathInElement from "katex/dist/contrib/auto-render.mjs" -document.addEventListener("DOMContentLoaded", function () { - import("katex/dist/contrib/auto-render") - .then(({ default: renderMathInElement }) => { - renderMathInElement(document.body) - }) - .catch((error) => console.error(error)) -}) +renderMathInElement(document.body) diff --git a/src/js/mermaid.js b/src/js/mermaid.js index 39cbddf..11107cf 100644 --- a/src/js/mermaid.js +++ b/src/js/mermaid.js @@ -1,6 +1,6 @@ -const Storage = require("store2") -const { v4: uuidv4 } = require("uuid") -const { COLOR_THEME_DARK, THEME, COLOR_THEME_AUTO } = require("./config.js") +import Storage from "store2" +import { v4 as uuidv4 } from "uuid" +import { COLOR_THEME_DARK, THEME, COLOR_THEME_AUTO } from "./config.js" import mermaid from "mermaid" diff --git a/src/js/search.js b/src/js/search.js index 1570f81..8adbbe6 100644 --- a/src/js/search.js +++ b/src/js/search.js @@ -1,7 +1,7 @@ -const groupBy = require("lodash/groupBy") -const truncate = require("lodash/truncate") -const { FlexSearch } = require("flexsearch/dist/flexsearch.compact.min") -const { Validator } = require("@cfworker/json-schema") +import groupBy from "lodash/groupBy" +import truncate from "lodash/truncate" +import Document from "flexsearch/dist/module/document" +import { Validator } from "@cfworker/json-schema" document.addEventListener("DOMContentLoaded", function (event) { const input = document.querySelector("#gdoc-search-input") @@ -66,7 +66,7 @@ function init(input, searchConfig) { store: ["title", "href", "parent", "description"] } - const index = new FlexSearch.Document(indexCfg) + const index = new Document(indexCfg) window.geekdocSearchIndex = index getJson(dataUrl, function (data) { diff --git a/webpack.config.js b/webpack.config.js index 55f72ce..df81d53 100644 --- a/webpack.config.js +++ b/webpack.config.js @@ -17,7 +17,7 @@ var config = { path.resolve("src", "sass", "mobile.scss"), path.resolve("src", "sass", "print.scss") ], - main: path.resolve("src", "js", "app.js"), + main: path.resolve("src", "js", "index.js"), colortheme: path.resolve("src", "js", "colorTheme.js"), mermaid: path.resolve("src", "js", "mermaid.js"), katex: [path.resolve("src", "js", "katex.js")].concat( @@ -34,6 +34,7 @@ var config = { watchOptions: { ignored: ["/exampleSite/", "/node_modules/"] }, + target: ["web", "es2017"], plugins: [ new CopyPlugin({ patterns: [