crx-monkey-next 0.0.1

package/src/node/plugins/tsBundler.ts

@@ -0,0 +1,197 @@
+import esbuild, { BuildOptions, Plugin, PluginBuild } from 'esbuild';
+import { CrxmBundlerPlugin, CrxmBundlerPluginWatch, CrxmResultSender } from '../typeDefs';
+import typescript, {
+  CompilerOptions,
+  parseJsonConfigFileContent,
+  readConfigFile,
+  sys,
+} from 'typescript';
+import chalk from 'chalk';
+
+export interface TsBundlerOptions {
+  /**
+   * The options esbuild.
+   */
+  esbuild?: BuildOptions;
+  /**
+   * Use checking types.
+   */
+  typeCheck?: boolean;
+  /**
+   * The path tsconfig.json
+   */
+  tsconfig?: string;
+}
+
+interface EsbuildTypecheckPluginArgs {
+  compilerOptions?: CompilerOptions;
+  exit: boolean;
+}
+
+function esbuildTypecheckPlugin(options: EsbuildTypecheckPluginArgs = { exit: false }) {
+  const tsPlugin: Plugin = {
+    name: 'esbuild-typecheck-plugin',
+    setup: (build: PluginBuild) => {
+      build.onLoad(
+        {
+          filter: new RegExp(/^.*.(ts|tsx)$/),
+        },
+        (args) => {
+          const { path } = args;
+
+          const compilerOptions =
+            options.compilerOptions !== undefined
+              ? options.compilerOptions
+              : { strict: true, noEmit: true };
+
+          const program = typescript.createProgram([path], compilerOptions);
+
+          const diagnostics = typescript.getPreEmitDiagnostics(program);
+
+          try {
+            diagnostics.forEach((d) => {
+              const message = typescript.flattenDiagnosticMessageText(d.messageText, '\n');
+              if (d.file && d.start !== undefined) {
+                const { line, character } = d.file.getLineAndCharacterOfPosition(d.start);
+
+                console.error(
+                  `\n ${chalk.bgBlueBright(' Typescript ')} ${chalk.bold(message)}\n ${chalk.gray(`${d.file.fileName} (${line + 1},${character + 1})`)}\n`,
+                );
+                if (options.exit) {
+                  process.exit(1);
+                }
+              } else {
+                throw new Error(message);
+              }
+            });
+          } catch (e) {
+            process.exit(1);
+          }
+          return null;
+        },
+      );
+    },
+  };
+  return tsPlugin;
+}
+
+/**
+ * Bundle typescript by esbuild
+ * @param options
+ * @returns
+ */
+export function tsBundler(options: TsBundlerOptions = { esbuild: {} }): CrxmBundlerPlugin {
+  const tsPluginOptions: EsbuildTypecheckPluginArgs = {
+    compilerOptions: {},
+    exit: true,
+  };
+
+  if (options.tsconfig !== undefined) {
+    const tsconfig = readConfigFile(options.tsconfig, sys.readFile);
+    const parsedOptions = parseJsonConfigFileContent(tsconfig.config, sys, './');
+
+    if (tsconfig.config !== undefined) {
+      tsPluginOptions.compilerOptions = parsedOptions.options;
+    }
+  }
+
+  return {
+    name: 'Crxm Typescript Plugin',
+    plugin: async (filePath: string) => {
+      return await esbuild
+        .build({
+          ...(options.esbuild !== undefined ? options.esbuild : {}),
+          entryPoints: [filePath],
+          treeShaking: true,
+          bundle: true,
+          metafile: true,
+          write: false,
+          format: 'iife',
+          target: 'esnext',
+          platform: 'browser',
+          logLevel: 'error',
+          tsconfig: options.tsconfig,
+          external: ['esbuild', 'esbuild/*', 'fs-extra', 'fs-extra/*', 'fs', 'path', 'crypto'],
+
+          plugins: [
+            ...(options.esbuild?.plugins !== undefined ? options.esbuild.plugins : []),
+            ...(options.typeCheck ? [esbuildTypecheckPlugin(tsPluginOptions)] : []),
+          ],
+        })
+        .then((result) => {
+          const outputFile = result.outputFiles[0];
+          return outputFile.contents;
+        });
+    },
+  };
+}
+
+/**
+ * Bundle typescript by esbuild
+ * @param options
+ * @returns
+ */
+export function tsBundlerWatch(
+  options: TsBundlerOptions = { esbuild: {} },
+): CrxmBundlerPluginWatch {
+  return {
+    name: 'Crxm Watch Typescript Plugin',
+    plugin: async (filePath: string, sendResult: CrxmResultSender) => {
+      const watchPlugin: Plugin = {
+        name: 'send-esbuild-build-result-to-crxm-plugin',
+        setup: (build: PluginBuild) => {
+          build.onEnd((result) => {
+            if (result.outputFiles !== undefined) {
+              const outputFile = result.outputFiles[0].contents;
+              sendResult(outputFile);
+            }
+          });
+        },
+      };
+
+      const tsPluginOptions: EsbuildTypecheckPluginArgs = {
+        compilerOptions: {
+          target: 99,
+        },
+        exit: false,
+      };
+
+      if (options.tsconfig !== undefined) {
+        const tsconfig = readConfigFile(options.tsconfig, sys.readFile);
+        const parsedOptions = parseJsonConfigFileContent(tsconfig.config, sys, './');
+
+        if (tsconfig.config !== undefined) {
+          tsPluginOptions.compilerOptions = parsedOptions.options;
+        }
+      }
+
+      const ctx = await esbuild.context({
+        ...(options.esbuild !== undefined ? options.esbuild : {}),
+        entryPoints: [filePath],
+        format: 'iife',
+        treeShaking: true,
+        bundle: true,
+        metafile: true,
+        write: false,
+        target: 'esnext',
+        platform: 'browser',
+        logLevel: 'error',
+        tsconfig: options.tsconfig,
+        plugins: [
+          ...(options.esbuild?.plugins !== undefined ? options.esbuild.plugins : []),
+          ...(options.typeCheck ? [esbuildTypecheckPlugin(tsPluginOptions)] : []),
+          watchPlugin,
+        ],
+      });
+
+      await ctx.watch();
+
+      return {
+        stop: async () => {
+          await ctx.dispose();
+          // console.log(`${filePath} watching stoped`);
+        },
+      };
+    },
+  };
+}

package/src/node/server/FileServer.ts

@@ -0,0 +1,97 @@
+import express from 'express';
+import { resolve, dirname, isAbsolute } from 'path';
+import fse from 'fs-extra';
+import * as http from 'http';
+import consola from 'consola';
+import { inject, injectable } from 'inversify';
+import { TYPES } from '../types';
+import { ConfigLoader } from '../ConfigLoader';
+/*
+/**
+ * The server of send to script code.
+ */
+@injectable()
+export class FileServer {
+  private readonly app: express.Express;
+  private server: null | http.Server = null;
+
+  constructor(@inject(TYPES.ConfigLoader) private readonly configLoader: ConfigLoader) {
+    const {
+      server: { host, port },
+    } = this.configLoader.useConfig();
+    if (host === undefined || port === undefined) {
+      throw new Error("Server host, port or  websocket's port were not specificated");
+    }
+
+    this.app = express();
+  }
+
+  /**
+   * Start server.
+   * @returns
+   */
+  public async start() {
+    this.setup();
+
+    const {
+      server: { host, port },
+    } = this.configLoader.useConfig();
+
+    if (host === undefined || port === undefined) {
+      throw new Error("Server host, port or  websocket's port were not specificated");
+    }
+
+    return new Promise((resolve) => {
+      this.server = this.app.listen(port, host, () => {
+        resolve(1);
+      });
+    });
+  }
+
+  public async dispose() {
+    if (this.server === null) {
+      throw consola.error(new Error('Dispose can be used after Watch is started'));
+    }
+
+    this.server.close();
+    this.server = null;
+  }
+
+  private setup() {
+    const {
+      output: { chrome, userjs },
+      manifest,
+    } = this.configLoader.useConfig();
+
+    if (chrome === undefined || userjs === undefined) {
+      throw new Error('');
+    }
+
+    this.app.get('/userscript', (req, res) => {
+      let filepath = userjs;
+
+      if (!isAbsolute(userjs)) {
+        filepath = resolve(dirname(manifest), userjs);
+      }
+
+      if (fse.existsSync(filepath)) {
+        res.sendFile(filepath);
+      } else {
+        res.send(400);
+      }
+    });
+
+    this.app.get('/dev.user.js', (req, res) => {
+      let filepath = userjs;
+
+      if (!isAbsolute(userjs)) {
+        filepath = resolve(dirname(manifest), dirname(userjs), 'dev.user.js');
+      }
+      if (fse.existsSync(filepath)) {
+        res.sendFile(filepath);
+      } else {
+        res.send(400);
+      }
+    });
+  }
+}

package/src/node/server/SockServer.ts

@@ -0,0 +1,143 @@
+import { inject, injectable } from 'inversify';
+import { WebSocketServer, type WebSocket } from 'ws';
+import { TYPES } from '../types';
+import { ConfigLoader } from '../ConfigLoader';
+import { Logger } from '../Logger';
+import chalk from 'chalk';
+
+/**
+ * The websocket server of manage auto reload.
+ */
+@injectable()
+export class SockServer {
+  private readonly wserver: WebSocketServer;
+  // eslint-disable-next-line @typescript-eslint/no-explicit-any
+  private listeners: SockServerLisntener<any>[] = [];
+
+  /**
+   * Start and setup server.
+   * @param host
+   * @param port
+   */
+  constructor(
+    @inject(TYPES.ConfigLoader) private readonly configLoader: ConfigLoader,
+    @inject(TYPES.Logger) private readonly logger: Logger,
+  ) {
+    const {
+      server: { host, websocket },
+    } = this.configLoader.useConfig();
+
+    this.wserver = new WebSocketServer({
+      port: websocket,
+      host: host,
+    });
+
+    //this.setup();
+  }
+
+  // eslint-disable-next-line @typescript-eslint/no-explicit-any, @typescript-eslint/no-unnecessary-type-constraint
+  public addMsgListener<T extends SockRecieveContent>(listener: SockServerLisntener<T>) {
+    this.listeners.push(listener);
+  }
+
+  private dispatch<T extends SockRecieveContent>(msg: SockRecieve<T>) {
+    this.listeners.forEach((l) => {
+      l(msg);
+    });
+  }
+
+  public setup() {
+    this.wserver.addListener('connection', (socket) => {
+      this.sendMsg<SockServerResponseConnected>(socket, {
+        type: 'connected',
+        content: null,
+      });
+
+      socket.addEventListener('message', (e) => {
+        if (typeof e.data === 'string') {
+          // eslint-disable-next-line @typescript-eslint/no-explicit-any
+          const data: SockRecieve<any> = JSON.parse(e.data);
+          this.dispatch(data);
+        }
+
+        this.sendMsg<SockServerResponseContent>(socket, {
+          type: 'send_ok',
+          content: null,
+        });
+      });
+    });
+  }
+
+  /**
+   * Send reload signal to websocket client.
+   * @param token
+   */
+  public reload(token: ReloadTokens) {
+    this.wserver.clients.forEach((client) => {
+      this.sendMsg<SockServerResponseReload>(client, {
+        type: 'reload',
+        content: token,
+      });
+    });
+
+    this.logger.dispatchDebug(`🔃 Dispatch reload ${chalk.gray('"' + token + '"')}`);
+  }
+
+  public sendMsg<T extends SockServerResponseContent>(
+    socket: WebSocket,
+    data: SockServerResponse<T>,
+  ) {
+    socket.send(JSON.stringify(data));
+  }
+
+  public dispose() {
+    this.wserver.close();
+  }
+}
+
+export interface SockServerResponseConnected extends SockServerResponseContent {
+  type: 'connected';
+  content: null;
+}
+
+export interface SockServerResponseReload extends SockServerResponseContent {
+  type: 'reload';
+  content: ReloadTokens;
+}
+export type ReloadTokens =
+  | 'RELOAD_CONTENT_SCRIPT'
+  | 'RELOAD_CSS'
+  | 'RELOAD_SW'
+  | 'RELOAD_POPUP_JS'
+  | 'RELOAD_POPUP_HTML'
+  | 'ALL';
+
+export interface SockServerResponse<T extends SockServerResponseContent> {
+  type: T['type'];
+  content: T['content'];
+}
+export interface SockServerResponseContent {
+  type: string;
+  // eslint-disable-next-line @typescript-eslint/no-explicit-any
+  content: any;
+}
+
+export interface SockServerConsoleRecieved extends SockRecieveContent {
+  type: 'console';
+  content: {
+    type: 'log' | 'warn' | 'error';
+    contents: string;
+  };
+}
+
+// eslint-disable-next-line @typescript-eslint/no-explicit-any
+type SockServerLisntener<T extends SockRecieveContent> = (msg: SockRecieve<T>) => any;
+export interface SockRecieve<T extends SockRecieveContent> {
+  type: T['type'];
+  content: T['content'];
+}
+export interface SockRecieveContent {
+  type: string;
+  // eslint-disable-next-line @typescript-eslint/no-explicit-any
+  content: any;
+}

package/src/node/typeDefs.ts

@@ -0,0 +1,221 @@
+/**
+ * The config for crx monkey.
+ */
+export interface CrxmConfig {
+  output?: {
+    /**
+     * Directory of outputs.
+     */
+    chrome?: string;
+    /**
+     * The path containing the filename of the output userscript.
+     */
+    userjs?: string;
+  };
+  /**
+   * The path of manifest.
+   */
+  manifest?: string;
+  /**
+   * Server settings.
+   */
+  server?: {
+    /**
+     * The port of file server.
+     */
+    port?: number;
+    /**
+     * The hostname using by file server and sockserver.
+     */
+    host?: string;
+    /**
+     * The port of websocket
+     */
+    websocket?: number;
+    /**
+     * Disable websocket for reloading in userscript
+     */
+    disable_sock_in_userjs?: boolean;
+  };
+  /**
+   * Additional Userscript header
+   */
+  header?: UserScriptHeader;
+  /**
+   * Setting build plugin for any file
+   * `Record<File regular expression, Bundler plugin>`
+   */
+  build?: Record<string, CrxmBundlerPlugin>;
+  /**
+   * Setting watch plugin for any file
+   * `Record<File regular expression, Bundler plugin>`
+   */
+  watch?: Record<string, CrxmBundlerPluginWatch>;
+  /**
+   * The log level.
+   * * `info` Show only infomations.
+   * * `error` Show infomations and errors.
+   * * `debug` Show all logs dispatched.
+   */
+  logLevel?: 'info' | 'error' | 'debug';
+  /**
+   * A directory copied as it is to `/public` in dist.
+   */
+  public?: string | undefined;
+  /**
+   * Define variables to bundled script.
+   */
+  define?: {
+    sw?: Record<string, string>;
+    contentscripts?: Record<string, string>;
+    popup?: Record<string, string>;
+  };
+}
+
+type DeepRequired<T> = {
+  [P in keyof T]-?: T[P] extends object ? DeepRequired<T[P]> : T[P];
+};
+
+export type CrxmConfigRequired = DeepRequired<CrxmConfig>;
+
+export type UserScriptHeader = Array<[keyof UserScriptHeaderProps, string]>;
+
+export interface UserScriptHeaderProps {
+  '@name': string;
+  '@namespace'?: string;
+  '@copyright'?: string;
+  '@version': string;
+  '@description'?: string;
+  '@icon'?: string;
+  '@iconURL'?: string;
+  '@defaulticon'?: string;
+  '@icon64'?: string;
+  '@icon64URL'?: string;
+  '@grant'?: string;
+  '@author'?: string;
+  '@homepage'?: string;
+  '@homepageURL'?: string;
+  '@website'?: string;
+  '@source'?: string;
+  '@antifeature'?: string;
+  '@require'?: string;
+  '@resource'?: string;
+  '@include'?: string;
+  '@match'?: string;
+  '@exclude'?: string;
+  '@run-at'?: string;
+  '@sandbox'?: string;
+  '@connect'?: string;
+  '@noframes'?: string;
+  '@updateURL'?: string;
+  '@downloadURL'?: string;
+  '@supportURL'?: string;
+  '@webRequest'?: string;
+  '@unwrap'?: string;
+  [key: string]: string | undefined;
+}
+
+export interface CrxmManifest extends chrome.runtime.ManifestV3 {
+  content_scripts?: CrxmContentScripts;
+}
+
+export interface CrxmManifestImportantKeys {
+  description: string;
+  content_scripts: CrxmContentScripts;
+  background: { service_worker: string; type: string } | undefined;
+  name: string;
+  version: string;
+  manifest_version: 3;
+  action:
+    | {
+        default_icon:
+          | {
+              '16'?: string;
+              '24'?: string;
+              '32'?: string;
+            }
+          | undefined;
+        default_title?: string;
+        default_popup?: string;
+      }
+    | undefined;
+  icons: Record<number, string> | undefined;
+}
+
+export type CrxmContentScript = {
+  matches?: string[] | undefined;
+  exclude_matches?: string[] | undefined;
+  css?: string[] | undefined;
+  js?: string[] | undefined;
+  run_at?: 'document_start' | 'document_end' | 'document_idle' | undefined;
+  all_frames?: boolean | undefined;
+  match_about_blank?: boolean | undefined;
+  include_globs?: string[] | undefined;
+  exclude_globs?: string[] | undefined;
+  world?: 'ISOLATED' | 'MAIN' | undefined;
+
+  userscript_direct_inject?: boolean;
+  trusted_inject?: boolean;
+  use_isolated_connection?: boolean;
+  [key: string]: unknown;
+};
+export type CrxmContentScripts = Array<CrxmContentScript>;
+
+export type CrxmManifestImportantKeyRequired = DeepRequired<CrxmManifestImportantKeys>;
+
+export type CrxmManifestRequired = CrxmManifestImportantKeyRequired & chrome.runtime.ManifestV3;
+
+export type BuildTarget = {
+  hash: string;
+  entryPoint: string;
+  usingPlugin: {
+    build: CrxmBundlerPlugin;
+    watch: CrxmBundlerPluginWatch;
+  };
+  flag: string;
+};
+
+export type ScriptUpdateHandler = (target: BuildTarget) => unknown;
+
+export interface I_CrxmBundler {
+  compileResults: Record<string, Uint8Array>;
+  addTarget(
+    entryPoint: string,
+    usingPlugin: { build: CrxmBundlerPlugin; watch: CrxmBundlerPluginWatch },
+    flag: string,
+  ): string;
+  removeTarget(targetEntryPoint: string): void;
+  getInternalHashFromPath(filePath: string, flag: string | null): string;
+  getBuildResultFromPath(filePath: string): Uint8Array | undefined;
+  build(): Promise<void>;
+  compileForce(hash: string): Promise<BuildTarget>;
+  watch(): Promise<void>;
+  stopWatch(): Promise<void>;
+  addListener(handler: ScriptUpdateHandler): void;
+  removeListener(handler: ScriptUpdateHandler): void;
+}
+
+/**
+ * Plugin for used when build.
+ */
+export type CrxmBundlerPlugin = {
+  name: string;
+  plugin: (filepath: string, bundler: I_CrxmBundler) => Promise<Uint8Array>;
+};
+/**
+ * Plugin for used when watch.
+ */
+export type CrxmBundlerPluginWatch = {
+  name: string;
+  plugin: (
+    filepath: string,
+    sendResult: CrxmResultSender,
+    bundler: I_CrxmBundler,
+  ) => Promise<CrxmBundlerPluginWatcher>;
+};
+
+export type CrxmBundlerPluginWatcher = {
+  stop: () => Promise<void>;
+};
+
+export type CrxmResultSender = (result: Uint8Array) => void;

package/src/node/types.ts

@@ -0,0 +1,24 @@
+/**
+ * For inversify
+ */
+export const TYPES = {
+  ConfigLoader: Symbol.for('I_ConfigLoader'),
+  ManifestLoader: Symbol.for('I_ManifestLoader'),
+  ManifestParser: Symbol.for('I_ManifestParser'),
+  CrxmBundler: Symbol.for('I_CrxmBundler'),
+  Watcher: Symbol.for('I_Watcher'),
+  BundlerRegisterer: Symbol.for('I_BundlerRegisterer'),
+  Distributior: Symbol.for('I_Distributior'),
+  ManifestFactory: Symbol.for('I_ManifestFactory'),
+  UserscriptBundler: Symbol.for('I_UserscriptBundler'),
+  UserscriptHeaderFactory: Symbol.for('I_UserscriptHeaderFactory'),
+  UserscriptRegisterer: Symbol.for('I_UserscriptRegisterer'),
+  Logger: Symbol.for('I_Logger'),
+  SockServer: Symbol.for('I_SockServer'),
+  CreateDevClient: Symbol.for('I_CreateDevClient'),
+  FileServer: Symbol.for('I_FileServer'),
+
+  BuildID: Symbol.for('BuildID'),
+  CacheDir: Symbol.for('CacheDir'),
+  IsWatch: Symbol.for('IsWatch'),
+};