Fix: Migrating every theme to TypeScript. (#2474)

* Dark theme to typescript

* Theme deuteranopia to typescript

* Theme hackermode to typescript

* Theme highcontrast to typescript

* Theme modern to typescript

* Theme tritanopia to typescript

* Make eslink happy + Prettier on every theme :p

* fix: Removed all self-dependcies

* chores: Reverting to coloour_block

* fix(themes): Fixed every theme with non-camelcase names.

* chores(package.json): Reverted all commits for package.json and package-lock.json

Author: tgbhy

plugins/theme-dark/src/index.js plugins/theme-dark/src/index.tsplugins/theme-dark/src/index.js renamed to plugins/theme-dark/src/index.ts

@@ -14,10 +14,11 @@ import * as Blockly from 'blockly/core';
  * Dark theme.
  */
 export default Blockly.Theme.defineTheme('dark', {
+  name: 'dark',
   base: Blockly.Themes.Classic,
   componentStyles: {
     workspaceBackgroundColour: '#1e1e1e',
-    toolboxBackgroundColour: 'blackBackground',
+    toolboxBackgroundColour: '#333',
     toolboxForegroundColour: '#fff',
     flyoutBackgroundColour: '#252526',
     flyoutForegroundColour: '#ccc',
@@ -27,6 +28,5 @@ export default Blockly.Theme.defineTheme('dark', {
     insertionMarkerOpacity: 0.3,
     scrollbarOpacity: 0.4,
     cursorColour: '#d0d0d0',
-    blackBackground: '#333',
   },
 });

plugins/theme-dark/tsconfig.json

@@ -0,0 +1,16 @@
+{
+  "compilerOptions": {
+    "baseUrl": "./",
+    "outDir": "dist",
+    "declaration": true,
+    "declarationMap": true,
+    "sourceMap": true,
+    "module": "es2015",
+    "moduleResolution": "bundler",
+    "target": "es6",
+    "strict": true
+  },
+  // NOTE: `test/**/*` is automatically included in `blockly-scripts start`.
+  // Only src matters for production builds.
+  "include": ["src"]
+}

plugins/theme-deuteranopia/src/index.js plugins/theme-deuteranopia/src/index.tsplugins/theme-deuteranopia/src/index.js renamed to plugins/theme-deuteranopia/src/index.ts

@@ -11,79 +11,79 @@
 import * as Blockly from 'blockly/core';
 
 const defaultBlockStyles = {
-  colour_blocks: {
+  colour_blocks: { // eslint-disable-line camelcase
     colourPrimary: '#f2a72c',
     colourSecondary: '#f1c172',
     colourTertiary: '#da921c',
   },
-  list_blocks: {
+  list_blocks: { // eslint-disable-line camelcase
     colourPrimary: '#7d65ab',
     colourSecondary: '#a88be0',
     colourTertiary: '#66518e',
   },
-  logic_blocks: {
+  logic_blocks: { // eslint-disable-line camelcase
     colourPrimary: '#9fd2f1',
     colourSecondary: '#c0e0f4',
     colourTertiary: '#74bae5',
   },
-  loop_blocks: {
+  loop_blocks: { // eslint-disable-line camelcase
     colourPrimary: '#795a07',
     colourSecondary: '#ac8726',
     colourTertiary: '#c4a03f',
   },
-  math_blocks: {
+  math_blocks: { // eslint-disable-line camelcase
     colourPrimary: '#e6da39',
     colourSecondary: '#f3ec8e',
     colourTertiary: '#f2eeb7',
   },
-  procedure_blocks: {
+  procedure_blocks: { // eslint-disable-line camelcase
     colourPrimary: '#590721',
     colourSecondary: '#8c475d',
     colourTertiary: '#885464',
   },
-  text_blocks: {
+  text_blocks: { // eslint-disable-line camelcase
     colourPrimary: '#058863',
     colourSecondary: '#5ecfaf',
     colourTertiary: '#04684c',
   },
-  variable_blocks: {
+  variable_blocks: { // eslint-disable-line camelcase
     colourPrimary: '#47025a',
     colourSecondary: '#820fa1',
     colourTertiary: '#8e579d',
   },
-  variable_dynamic_blocks: {
+  variable_dynamic_blocks: { // eslint-disable-line camelcase
     colourPrimary: '#47025a',
     colourSecondary: '#820fa1',
     colourTertiary: '#8e579d',
   },
 };
 
 const categoryStyles = {
-  colour_category: {
+  colour_category: { // eslint-disable-line camelcase
     colour: '#f2a72c',
   },
-  list_category: {
+  list_category: { // eslint-disable-line camelcase
     colour: '#7d65ab',
   },
-  logic_category: {
+  logic_category: { // eslint-disable-line camelcase
     colour: '#9fd2f1',
   },
-  loop_category: {
+  loop_category: { // eslint-disable-line camelcase
     colour: '#795a07',
   },
-  math_category: {
+  math_category: { // eslint-disable-line camelcase
     colour: '#e6da39',
   },
-  procedure_category: {
+  procedure_category: { // eslint-disable-line camelcase
     colour: '#590721',
   },
-  text_category: {
+  text_category: { // eslint-disable-line camelcase
     colour: '#058863',
   },
-  variable_category: {
+  variable_category: { // eslint-disable-line camelcase
     colour: '#47025a',
   },
-  variable_dynamic_category: {
+  variable_dynamic_category: { // eslint-disable-line camelcase
     colour: '#47025a',
   },
 };
@@ -95,10 +95,11 @@ const categoryStyles = {
  * inability to perceive red light).
  */
 export default Blockly.Theme.defineTheme('deuteranopia', {
+  name: 'deuteranopia',
   base: Blockly.Themes.Classic,
   blockStyles: defaultBlockStyles,
   categoryStyles: categoryStyles,
   componentStyles: {},
   fontStyle: {},
-  startHats: null,
+  startHats: undefined,
 });

plugins/theme-deuteranopia/tsconfig.json

@@ -0,0 +1,16 @@
+{
+  "compilerOptions": {
+    "baseUrl": "./",
+    "outDir": "dist",
+    "declaration": true,
+    "declarationMap": true,
+    "sourceMap": true,
+    "module": "es2015",
+    "moduleResolution": "bundler",
+    "target": "es6",
+    "strict": true
+  },
+  // NOTE: `test/**/*` is automatically included in `blockly-scripts start`.
+  // Only src matters for production builds.
+  "include": ["src"]
+}

plugins/theme-hackermode/src/index.js plugins/theme-hackermode/src/index.tsplugins/theme-hackermode/src/index.js renamed to plugins/theme-hackermode/src/index.ts

@@ -12,90 +12,91 @@
 import * as Blockly from 'blockly/core';
 
 const defaultBlockStyles = {
-  colour_blocks: {
+  colour_blocks: { // eslint-disable-line camelcase
     colourPrimary: '#0c0d0d',
     colourSecondary: '#0c0d0d',
     colourTertiary: '#edf2f2',
   },
-  list_blocks: {
+  list_blocks: {  // eslint-disable-line camelcase
     colourPrimary: '#0c0d0d',
     colourSecondary: '#0c0d0d',
     colourTertiary: '#edf2f2',
   },
-  logic_blocks: {
+  logic_blocks: {  // eslint-disable-line camelcase
     colourPrimary: '#0c0d0d',
     colourSecondary: '#0c0d0d',
     colourTertiary: '#edf2f2',
   },
-  loop_blocks: {
+  loop_blocks: {  // eslint-disable-line camelcase
     colourPrimary: '#0c0d0d',
     colourSecondary: '#0c0d0d',
     colourTertiary: '#edf2f2',
   },
-  math_blocks: {
+  math_blocks: {  // eslint-disable-line camelcase
     colourPrimary: '#0c0d0d',
     colourSecondary: '#0c0d0d',
     colourTertiary: '#edf2f2',
   },
-  procedure_blocks: {
+  procedure_blocks: {  // eslint-disable-line camelcase
     colourPrimary: '#0c0d0d',
     colourSecondary: '#0c0d0d',
     colourTertiary: '#edf2f2',
   },
-  text_blocks: {
+  text_blocks: {  // eslint-disable-line camelcase
     colourPrimary: '#0c0d0d',
     colourSecondary: '#0c0d0d',
     colourTertiary: '#edf2f2',
   },
-  variable_blocks: {
+  variable_blocks: {  // eslint-disable-line camelcase
     colourPrimary: '#0c0d0d',
     colourSecondary: '#0c0d0d',
     colourTertiary: '#edf2f2',
   },
-  variable_dynamic_blocks: {
+  variable_dynamic_blocks: {  // eslint-disable-line camelcase
     colourPrimary: '#0c0d0d',
     colourSecondary: '#0c0d0d',
     colourTertiary: '#edf2f2',
   },
 };
 
 const categoryStyles = {
-  colour_category: {
+  colour_category: {  // eslint-disable-line camelcase
     colour: '#0c0d0d',
   },
-  list_category: {
+  list_category: {  // eslint-disable-line camelcase
     colour: '#0c0d0d',
   },
-  logic_category: {
+  logic_category: {  // eslint-disable-line camelcase
     colour: '#0c0d0d',
   },
-  loop_category: {
+  loop_category: {  // eslint-disable-line camelcase
     colour: '#0c0d0d',
   },
-  math_category: {
+  math_category: {  // eslint-disable-line camelcase
     colour: '#0c0d0d',
   },
-  procedure_category: {
+  procedure_category: {  // eslint-disable-line camelcase
     colour: '#0c0d0d',
   },
-  text_category: {
+  text_category: {  // eslint-disable-line camelcase
     colour: '#0c0d0d',
   },
-  variable_category: {
+  variable_category: {  // eslint-disable-line camelcase
     colour: '#0c0d0d',
   },
-  variable_dynamic_category: {
+  variable_dynamic_category: {  // eslint-disable-line camelcase
     colour: '#0c0d0d',
   },
 };
 
 export default Blockly.Theme.defineTheme('hackermode', {
+  name: 'hackermode',
   base: Blockly.Themes.Classic,
   blockStyles: defaultBlockStyles,
   categoryStyles: categoryStyles,
   componentStyles: {
     workspaceBackgroundColour: '#1e1e1e',
-    toolboxBackgroundColour: 'blackBackground',
+    toolboxBackgroundColour: '#333',
     toolboxForegroundColour: '#73ed58',
     flyoutBackgroundColour: '#252526',
     flyoutForegroundColour: '#73ed58',
@@ -105,12 +106,11 @@ export default Blockly.Theme.defineTheme('hackermode', {
     insertionMarkerOpacity: 0.3,
     scrollbarOpacity: 0.4,
     cursorColour: '#d0d0d0',
-    blackBackground: '#333',
   },
   fontStyle: {
     family: 'monospace',
-    weight: null,
-    size: null,
+    weight: undefined,
+    size: undefined,
   },
-  startHats: null,
+  startHats: undefined,
 });

plugins/theme-hackermode/tsconfig.json

@@ -0,0 +1,16 @@
+{
+  "compilerOptions": {
+    "baseUrl": "./",
+    "outDir": "dist",
+    "declaration": true,
+    "declarationMap": true,
+    "sourceMap": true,
+    "module": "es2015",
+    "moduleResolution": "bundler",
+    "target": "es6",
+    "strict": true
+  },
+  // NOTE: `test/**/*` is automatically included in `blockly-scripts start`.
+  // Only src matters for production builds.
+  "include": ["src"]
+}