Theme module react

apps/remix-ide/src/app/tabs/theme-module.js

@@ -2,7 +2,6 @@ import { Plugin } from '@remixproject/engine'
 import { EventEmitter } from 'events'
 import QueryParams from '../../lib/query-params'
 import * as packageJson from '../../../../../package.json'
-import yo from 'yo-yo'
 const _paq = window._paq = window._paq || []
 
 const themes = [
@@ -37,10 +36,12 @@ export class ThemeModule extends Plugin {
       theme.url = window.location.origin + window.location.pathname + theme.url
       return { ...acc, [theme.name]: theme }
     }, {})
+    this._paq = _paq
     let queryTheme = (new QueryParams()).get().theme
     queryTheme = this.themes[queryTheme] ? queryTheme : null
     let currentTheme = this._deps.config.get('settings/theme')
     currentTheme = this.themes[currentTheme] ? currentTheme : null
+    this.currentThemeState = { queryTheme, currentTheme }
     this.active = queryTheme || currentTheme || 'Dark'
     this.forced = !!queryTheme
   }
@@ -58,11 +59,16 @@ export class ThemeModule extends Plugin {
   /**
    * Init the theme
    */
-  initTheme (callback) {
+  initTheme (callback) { // callback is setTimeOut in app.js which is always passed
+    if (callback) this.initCallback = callback
     if (this.active) {
       const nextTheme = this.themes[this.active] // Theme
       document.documentElement.style.setProperty('--theme', nextTheme.quality)
-      const theme = yo`<link rel="stylesheet" href="${nextTheme.url}" id="theme-link"/>`
+
+      const theme = document.createElement('link')
+      theme.setAttribute('rel', 'stylesheet')
+      theme.setAttribute('href', nextTheme.url)
+      theme.setAttribute('id', 'theme-link')
       theme.addEventListener('load', () => {
         if (callback) callback()
       })
@@ -79,12 +85,16 @@ export class ThemeModule extends Plugin {
       throw new Error(`Theme ${themeName} doesn't exist`)
     }
     const next = themeName || this.active // Name
-    if (next === this.active) return
+    if (next === this.active) return // --> exit out of this method
     _paq.push(['trackEvent', 'themeModule', 'switchTo', next])
     const nextTheme = this.themes[next] // Theme
     if (!this.forced) this._deps.config.set('settings/theme', next)
     document.getElementById('theme-link').remove()
-    const theme = yo`<link rel="stylesheet" href="${nextTheme.url}" id="theme-link"/>`
+    const theme = document.createElement('link')
+
+    theme.setAttribute('rel', 'stylesheet')
+    theme.setAttribute('href', nextTheme.url)
+    theme.setAttribute('id', 'theme-link')
     theme.addEventListener('load', () => {
       this.emit('themeLoaded', nextTheme)
       this.events.emit('themeLoaded', nextTheme)

libs/remix-ui/settings/src/lib/remix-ui-settings.tsx

@@ -7,23 +7,24 @@ import './remix-ui-settings.css'
 import { ethereumVM, generateContractMetadat, personal, textWrapEventAction, useMatomoAnalytics, saveTokenToast, removeTokenToast } from './settingsAction'
 import { initialState, toastInitialState, toastReducer, settingReducer } from './settingsReducer'
 import { Toaster } from '@remix-ui/toaster'// eslint-disable-line
+import { RemixUiThemeModule } from '@remix-ui/theme-module'
+import { ThemeModule } from 'libs/remix-ui/theme-module/types/theme-module'
 
 /* eslint-disable-next-line */
 export interface RemixUiSettingsProps {
   config: any,
   editor: any,
    _deps: any,
    useMatomoAnalytics: boolean
+   themeModule: ThemeModule
 }
 
 export const RemixUiSettings = (props: RemixUiSettingsProps) => {
   const [, dispatch] = useReducer(settingReducer, initialState)
   const [state, dispatchToast] = useReducer(toastReducer, toastInitialState)
   const [tokenValue, setTokenValue] = useState('')
-  const [themeName, setThemeName] = useState('')
 
   useEffect(() => {
-    props._deps.themeModule.switchTheme()
     const token = props.config.get('settings/gist-access-token')
     if (token === undefined) {
       props.config.set('settings/generate-contract-metadata', true)
@@ -32,7 +33,7 @@ export const RemixUiSettings = (props: RemixUiSettingsProps) => {
     if (token) {
       setTokenValue(token)
     }
-  }, [themeName, state.message])
+  }, [state.message])
 
   useEffect(() => {
     if (props.useMatomoAnalytics !== null) useMatomoAnalytics(props.config, props.useMatomoAnalytics, dispatch)
@@ -64,11 +65,6 @@ export const RemixUiSettings = (props: RemixUiSettingsProps) => {
     useMatomoAnalytics(props.config, event.target.checked, dispatch)
   }
 
-  const onswitchTheme = (event, name) => {
-    props._deps.themeModule.switchTheme(name)
-    setThemeName(name)
-  }
-
   const getTextClass = (key) => {
     if (props.config.get(key)) {
       return textDark
@@ -155,32 +151,12 @@ export const RemixUiSettings = (props: RemixUiSettingsProps) => {
     </div>
   )
 
-  const themes = () => {
-    const themes = props._deps.themeModule.getThemes()
-    if (themes) {
-      return themes.map((aTheme, index) => (
-        <div className="radio custom-control custom-radio mb-1 form-check" key={index}>
-          <input type="radio" onChange={event => { onswitchTheme(event, aTheme.name) }} className="align-middle custom-control-input" name='theme' id={aTheme.name} data-id={`settingsTabTheme${aTheme.name}`} checked = {props._deps.themeModule.active === aTheme.name }/>
-          <label className="form-check-label custom-control-label" data-id={`settingsTabThemeLabel${aTheme.name}`} htmlFor={aTheme.name}>{aTheme.name} ({aTheme.quality})</label>
-        </div>
-      )
-      )
-    }
-  }
-
   return (
     <div>
       {state.message ? <Toaster message= {state.message}/> : null}
       {generalConfig()}
       {gistToken()}
-      <div className="border-top">
-        <div className="card-body pt-3 pb-2">
-          <h6 className="card-title">Themes</h6>
-          <div className="card-text themes-container">
-            {themes()}
-          </div>
-        </div>
-      </div>
+      <RemixUiThemeModule themeModule={props._deps.themeModule} />
     </div>
   )
 }

libs/remix-ui/theme-module/.babelrc

@@ -0,0 +1,12 @@
+{
+  "presets": [
+    [
+      "@nrwl/react/babel",
+      {
+        "runtime": "automatic",
+        "useBuiltIns": "usage"
+      }
+    ]
+  ],
+  "plugins": []
+}

libs/remix-ui/theme-module/.eslintrc.json

@@ -0,0 +1,18 @@
+{
+  "extends": ["plugin:@nrwl/nx/react", "../../../.eslintrc.json"],
+  "ignorePatterns": ["!**/*"],
+  "overrides": [
+    {
+      "files": ["*.ts", "*.tsx", "*.js", "*.jsx"],
+      "rules": {}
+    },
+    {
+      "files": ["*.ts", "*.tsx"],
+      "rules": {}
+    },
+    {
+      "files": ["*.js", "*.jsx"],
+      "rules": {}
+    }
+  ]
+}

libs/remix-ui/theme-module/README.md

@@ -0,0 +1,7 @@
+# remix-ui-theme-module
+
+This library was generated with [Nx](https://nx.dev).
+
+## Running unit tests
+
+Run `nx test remix-ui-theme-module` to execute the unit tests via [Jest](https://jestjs.io).

libs/remix-ui/theme-module/src/index.ts

@@ -0,0 +1 @@
+export * from './lib/remix-ui-theme-module';

libs/remix-ui/theme-module/src/lib/remix-ui-theme-module.tsx

@@ -0,0 +1,106 @@
+/* eslint-disable @typescript-eslint/no-explicit-any */
+import React, { useEffect, useRef, useState } from 'react';
+import { Theme, ThemeModule } from '../../types/theme-module';
+import './remix-ui-theme-module.module.css';
+
+/* eslint-disable-next-line */
+export interface RemixUiThemeModuleProps {
+  themeModule: ThemeModule;
+}
+
+const defaultThemes = [
+  {
+    name: 'Dark',
+    quality: 'dark',
+    url: 'assets/css/themes/remix-dark_tvx1s2.css'
+  },
+  {
+    name: 'Light',
+    quality: 'light',
+    url: 'assets/css/themes/remix-light_powaqg.css'
+  },
+  {
+    name: 'Midcentury',
+    quality: 'light',
+    url: 'assets/css/themes/remix-midcentury_hrzph3.css'
+  },
+  {
+    name: 'Black',
+    quality: 'dark',
+    url: 'assets/css/themes/remix-black_undtds.css'
+  },
+  {
+    name: 'Candy',
+    quality: 'light',
+    url: 'assets/css/themes/remix-candy_ikhg4m.css'
+  },
+
+  {
+    name: 'Cerulean',
+    quality: 'light',
+    url: 'assets/css/themes/bootstrap-cerulean.min.css'
+  },
+  {
+    name: 'Flatly',
+    quality: 'light',
+    url: 'assets/css/themes/bootstrap-flatly.min.css'
+  },
+  {
+    name: 'Spacelab',
+    quality: 'light',
+    url: 'assets/css/themes/bootstrap-spacelab.min.css'
+  },
+  {
+    name: 'Cyborg',
+    quality: 'dark',
+    url: 'assets/css/themes/bootstrap-cyborg.min.css'
+  }
+];
+
+export function RemixUiThemeModule({ themeModule }: RemixUiThemeModuleProps) {
+  const [themeName, setThemeName] = useState('')
+
+  useEffect(() => {
+      themeModule.switchTheme()
+  }, [themeName, themeModule])
+
+  return (
+    <div className="border-top">
+      <div className="card-body pt-3 pb-2">
+        <h6 className="card-title">Themes</h6>
+        <div className="card-text themes-container">
+          {themeModule.getThemes()
+            ? themeModule.getThemes().map((theme, idx) => (
+                <div
+                  className="radio custom-control custom-radio mb-1 form-check"
+                  key={idx}
+                >
+                  <input
+                    type="radio"
+                    onChange={event => {
+                      themeModule.switchTheme(theme.name);
+                      setThemeName(theme.name);
+                    }}
+                    className="align-middle custom-control-input"
+                    name="theme"
+                    id={theme.name}
+                    data-id={`settingsTabTheme${theme.name}`}
+                    checked={themeModule.active === theme.name}
+                  />
+                  <label
+                    className="form-check-label custom-control-label"
+                    data-id={`settingsTabThemeLabel${theme.name}`}
+                    htmlFor={theme.name}
+                  >
+                    {theme.name} ({theme.quality})
+                  </label>
+                </div>
+              ))
+            : null}
+        </div>
+      </div>
+    </div>
+  )
+}
+
+export default RemixUiThemeModule;

libs/remix-ui/theme-module/tsconfig.json

@@ -0,0 +1,20 @@
+{
+  "extends": "../../../tsconfig.base.json",
+  "compilerOptions": {
+    "jsx": "react",
+    "allowJs": true,
+    "esModuleInterop": true,
+    "allowSyntheticDefaultImports": true,
+    "forceConsistentCasingInFileNames": true,
+    "strict": true,
+    "noImplicitReturns": true,
+    "noFallthroughCasesInSwitch": true
+  },
+  "files": [],
+  "include": [],
+  "references": [
+    {
+      "path": "./tsconfig.lib.json"
+    }
+  ]
+}

libs/remix-ui/theme-module/tsconfig.lib.json

@@ -0,0 +1,13 @@
+{
+  "extends": "./tsconfig.json",
+  "compilerOptions": {
+    "outDir": "../../../dist/out-tsc",
+    "types": ["node"]
+  },
+  "files": [
+    "../../../node_modules/@nrwl/react/typings/cssmodule.d.ts",
+    "../../../node_modules/@nrwl/react/typings/image.d.ts"
+  ],
+  "exclude": ["**/*.spec.ts", "**/*.spec.tsx"],
+  "include": ["**/*.js", "**/*.jsx", "**/*.ts", "**/*.tsx"]
+}

libs/remix-ui/theme-module/types/theme-module.d.ts

@@ -0,0 +1,47 @@
+import { Plugin } from "@remixproject/engine/lib/abstract";
+import { EventEmitter } from "events";
+// eslint-disable-next-line @typescript-eslint/no-explicit-any
+export class ThemeModule extends Plugin<any, any> {
+    currentThemeState: Record<string, unknown>;
+    // eslint-disable-next-line @typescript-eslint/no-explicit-any
+    constructor(registry: any);
+    events: EventEmitter;
+    _deps: {
+        // eslint-disable-next-line @typescript-eslint/no-explicit-any
+        config: any;
+    };
+    // eslint-disable-next-line @typescript-eslint/no-explicit-any
+    _paq: any
+    element: HTMLDivElement;
+    // eslint-disable-next-line @typescript-eslint/ban-types
+    themes: {[key: string]: Theme};
+    // eslint-disable-next-line @typescript-eslint/no-explicit-any
+    active: string;
+    forced: boolean;
+    render(): HTMLDivElement;
+    renderComponent(): void;
+    /** Return the active theme */
+    // eslint-disable-next-line @typescript-eslint/no-explicit-any
+    currentTheme(): any;
+    /** Returns all themes as an array */
+    // eslint-disable-next-line @typescript-eslint/no-explicit-any
+    getThemes(): Theme[];
+    /**
+     * Init the theme
+     */
+    // eslint-disable-next-line @typescript-eslint/no-explicit-any
+    initTheme(callback: any): void;
+    /**
+     * Change the current theme
+     * @param {string} [themeName] - The name of the theme
+     */
+    switchTheme(themeName?: string): void;
+    /**
+     * fixes the invertion for images since this should be adjusted when we switch between dark/light qualified themes
+     * @param {element} [image] - the dom element which invert should be fixed to increase visibility
+     */
+    // eslint-disable-next-line @typescript-eslint/no-explicit-any
+    fixInvert(image?: any): void;
+}
+
+interface Theme { name: string, quality: string, url: string }

nx.json

@@ -141,6 +141,9 @@
     },
     "remix-ui-tabs": {
       "tags": []
+    },
+    "remix-ui-theme-module": {
+      "tags": []
     }
   },
   "targetDependencies": {