greentext and shiftjis

build.mjs

@@ -1,9 +1,11 @@
+/* eslint-disable no-console */
 import * as esbuild from "esbuild";
 import copyStaticFiles from "esbuild-copy-static-files";
 import fs from "fs";
 
 const prod = process.env.NODE_ENV === "production";
 const watch = process.argv.includes("--watch");
+const clean = process.argv.includes("--clean");
 
 function makeConfig(ext, name) {
   const entryPoints = [];
@@ -46,20 +48,20 @@ function makeConfig(ext, name) {
     name: "buildLog",
     setup(build) {
       build.onEnd(() => {
-        console.log(
-          `[${timeFormatter.format(
-            new Date()
-          )}] [${ext}/${name}] build finished`
-        );
+        console.log(`[${timeFormatter.format(new Date())}] [${ext}/${name}] build finished`);
       });
     }
   };
 
+  const styleInput = `./src/${ext}/style.css`;
+  const styleOutput = `./dist/${ext}/style.css`;
+
   return {
     entryPoints,
     outdir: `./dist/${ext}`,
 
-    format: "cjs",
+    format: "iife",
+    globalName: "module.exports",
     platform: "node",
 
     treeShaking: true,
@@ -74,6 +76,14 @@ function makeConfig(ext, name) {
         src: `./src/${ext}/manifest.json`,
         dest: `./dist/${ext}/manifest.json`
       }),
+      ...(fs.existsSync(styleInput)
+        ? [
+            copyStaticFiles({
+              src: styleInput,
+              dest: styleOutput
+            })
+          ]
+        : []),
       wpImportPlugin,
       buildLogPlugin
     ]
@@ -83,15 +93,13 @@ function makeConfig(ext, name) {
 const exts = fs.readdirSync("./src");
 
 const config = exts
-  .map((x) => [
-    makeConfig(x, "index"),
-    makeConfig(x, "node"),
-    makeConfig(x, "host")
-  ])
+  .map((x) => [makeConfig(x, "index"), makeConfig(x, "node"), makeConfig(x, "host")])
   .flat()
   .filter((c) => c !== null);
 
-if (watch) {
+if (clean) {
+  fs.rmSync("./dist", { recursive: true, force: true });
+} else if (watch) {
   await Promise.all(
     config.map(async (c) => {
       const ctx = await esbuild.context(c);

src/greentext/index.ts

@@ -0,0 +1,8 @@
+import { ExtensionWebpackModule } from "@moonlight-mod/types";
+
+export const webpackModules: Record<string, ExtensionWebpackModule> = {
+  greentext: {
+    entrypoint: true,
+    dependencies: [{ ext: "markdown", id: "markdown" }, { id: "react" }]
+  }
+};

src/greentext/manifest.json

@@ -0,0 +1,17 @@
+{
+  "$schema": "https://moonlight-mod.github.io/manifest.schema.json",
+  "id": "greentext",
+  "version": "1.0.0",
+  "meta": {
+    "name": "Greentext",
+    "tagline": ">has to explain what it does",
+    "authors": [
+      "Cynosphere"
+    ],
+    "tags": [
+      "chat"
+    ],
+    "source": "https://github.com/Cynosphere/moonlight-extensions"
+  },
+  "apiLevel": 2
+}

src/greentext/style.css

@@ -0,0 +1,12 @@
+.theme-dark .greentext {
+	color: #afc960;
+}
+
+.theme-light .greentext {
+	color: #789922;
+}
+
+.greentext-ban {
+	font-weight: bold;
+	color: var(--red-400);
+}

src/greentext/webpackModules/greentext.tsx

@@ -0,0 +1,61 @@
+import React from "@moonlight-mod/wp/react";
+import * as Markdown from "@moonlight-mod/wp/markdown_markdown";
+
+Markdown.addRule(
+  "greentext",
+  (rules) => ({
+    order: rules.text.order,
+    // @ts-expect-error i cant care enough to get this type working
+    match: function (text, state) {
+      if (state.inGreentext || state.inQuote) return null;
+
+      return /^$|\n$/.test(state.prevCapture != null ? state.prevCapture[0] : "") && /^(>.+?)(?:\n|$)/.exec(text);
+    },
+    parse: function (capture, parse, state) {
+      state.inGreentext = true;
+      const node = {
+        content: parse(capture[0], state)
+      };
+      delete state.inGreentext;
+      return node;
+    },
+    react: function (node, recurseOutput, state) {
+      return <span className="greentext">{recurseOutput(node.content, state)}</span>;
+    }
+  }),
+  () => ({
+    type: "inlineStyle",
+    before: "",
+    after: ""
+  }),
+  "greentext"
+);
+Markdown.blacklistFromRuleset("INLINE_REPLY_RULES", "greentext");
+
+Markdown.addRule(
+  "greentext-ban",
+  (rules) => ({
+    order: rules.strong.order - 1,
+    match: function (text, state) {
+      if (state.inGreentextBan) return null;
+      return /^\*\*\(USER WAS BANNED FOR THIS POST\)\*\*/.exec(text);
+    },
+    parse: function (capture, parse, state) {
+      state.inGreentextBan = true;
+      const node = {
+        content: parse(capture[0], state)
+      };
+      delete state.inGreentextBan;
+      return node;
+    },
+    react: function (node, recurseOutput, state) {
+      return <span className="greentext-ban">{recurseOutput(node.content, state)}</span>;
+    }
+  }),
+  () => ({
+    type: "inlineStyle",
+    before: "",
+    after: ""
+  }),
+  "greentext-ban"
+);

src/shiftjis/index.ts

@@ -0,0 +1,8 @@
+import { ExtensionWebpackModule } from "@moonlight-mod/types";
+
+export const webpackModules: Record<string, ExtensionWebpackModule> = {
+  shiftjis: {
+    entrypoint: true,
+    dependencies: [{ ext: "markdown", id: "markdown" }, { id: "react" }]
+  }
+};

src/shiftjis/manifest.json

@@ -0,0 +1,17 @@
+{
+  "$schema": "https://moonlight-mod.github.io/manifest.schema.json",
+  "id": "shiftjis",
+  "version": "1.0.0",
+  "meta": {
+    "name": "ShiftJIS Codeblocks",
+    "tagline": "Renders codeblocks with the `sjis` language as normal text in a ShiftJIS supported font",
+    "authors": [
+      "Cynosphere"
+    ],
+    "tags": [
+      "chat"
+    ],
+    "source": "https://github.com/Cynosphere/moonlight-extensions"
+  },
+  "apiLevel": 2
+}

src/shiftjis/style.css

@@ -0,0 +1,9 @@
+.shiftjis {
+	font-size: 16px;
+	line-height: 17px;
+	white-space: pre;
+	font-family: "IPAMonaPGothic", "Mona", "MS PGothic", monospace;
+	overflow: auto;
+	display: block;
+	clear: left;
+}

src/shiftjis/webpackModules/shiftjis.tsx

@@ -0,0 +1,37 @@
+import React from "@moonlight-mod/wp/react";
+import * as Markdown from "@moonlight-mod/wp/markdown_markdown";
+
+Markdown.addRule(
+  "shiftjis",
+  (rules) => ({
+    order: rules.codeBlock.order - 1,
+    match: function (text, state) {
+      if (state.inShiftjis || state.inQuote) return null;
+      return /^```sjis(?:\n)?((?:\\[\s\S]|[^\\])+?)```(?!`)/.exec(text);
+    },
+    parse: function (capture, parse, state) {
+      state.inShiftjis = true;
+      const node = {
+        content: parse(
+          capture[1]
+            .replace(/\\/g, "\\\\")
+            .replace(/`/g, "\\`")
+            .replace(/_/g, "\\_")
+            .replace(/\*/g, "\\*")
+            .replace(/~/g, "\\~")
+            .replace(/\|/g, "\\|"),
+          state
+        )
+      };
+      delete state.inShiftjis;
+      return node;
+    },
+    react: function (node, recurseOutput, state) {
+      return <span className="shiftjis">{recurseOutput(node.content, state)}</span>;
+    }
+  }),
+  () => ({
+    type: "inlineObject"
+  })
+);
+Markdown.blacklistFromRuleset("INLINE_REPLY_RULES", "shiftjis");