chore: finalize rsbuild (keeping webpack for now)

shafin-deriv · Jul 16, 2024 · dfa753f · dfa753f
1 parent dda8243
commit dfa753f
Show file tree

Hide file tree

Showing 10 changed files with 39 additions and 33 deletions.
diff --git a/.eslintignore b/.eslintignore
@@ -3,3 +3,4 @@ src/**/__tests__/*.js
 src/_common/lib/**/*.js
 .eslintrc.js
 .eslintrc.cjs
+rsbuild.config.ts
diff --git a/.eslintrc.js b/.eslintrc.js
@@ -1,4 +1,4 @@
-const webpackConfig = require('./webpack.config');
+// const rsbuildConfig = require('./rsbuild.config.ts');
 
 module.exports = {
     parser: '@typescript-eslint/parser',
@@ -25,9 +25,9 @@ module.exports = {
     },
     extends: ['eslint:recommended', 'plugin:react/recommended', 'plugin:@typescript-eslint/recommended'],
     settings: {
-        'import/resolver': {
-            webpack: { config: webpackConfig },
-        },
+        // 'import/resolver': {
+        //     rspack: { config: rsbuildConfig },
+        // },
     },
     plugins: ['react', 'react-hooks', 'simple-import-sort', '@typescript-eslint'],
     rules: {
@@ -82,5 +82,5 @@ module.exports = {
             },
         },
     ],
-    ignorePatterns: ['node_modules/', 'dist/', '**/webpack.config.js'],
+    ignorePatterns: ['node_modules/', 'dist/'],
 };
diff --git a/package.json b/package.json
@@ -8,8 +8,8 @@
     "scripts": {
         "start": "rsbuild dev",
         "build": "rsbuild build",
-        "start:wp": "webpack serve --open --config webpack.config.js",
-        "build:wp": "webpack --config webpack.config.js",
+        "start:webpack": "webpack serve --open --config webpack.config.js",
+        "build:webpack": "webpack --config webpack.config.js",
         "test:lint": "prettier --log-level silent --write . && eslint \"./src/**/*.?(js|jsx|ts|tsx)\"",
         "test:fix": "prettier --log-level silent --write . && eslint --fix \"./src/**/*.?(js|jsx|ts|tsx)\"",
         "test": "jest",

diff --git a/rsbuild.config.ts b/rsbuild.config.ts
@@ -8,13 +8,12 @@ export default defineConfig({
         pluginSass({
             sassLoaderOptions: {
                 sourceMap: true,
-                // additionalData: `@import url('@/components/shared/styles/constants.scss');`,
                 additionalData: `
-                @import "${path.resolve(__dirname, 'src/components/shared/styles/constants.scss')}";
-                @import "${path.resolve(__dirname, 'src/components/shared/styles/mixins.scss')}";
-                @import "${path.resolve(__dirname, 'src/components/shared/styles/fonts.scss')}";
-                @import "${path.resolve(__dirname, 'src/components/shared/styles/inline-icons.scss')}";
-                @import "${path.resolve(__dirname, 'src/components/shared/styles/devices.scss')}";
+                    @import "${path.resolve(__dirname, 'src/components/shared/styles/constants.scss')}";
+                    @import "${path.resolve(__dirname, 'src/components/shared/styles/mixins.scss')}";
+                    @import "${path.resolve(__dirname, 'src/components/shared/styles/fonts.scss')}";
+                    @import "${path.resolve(__dirname, 'src/components/shared/styles/inline-icons.scss')}";
+                    @import "${path.resolve(__dirname, 'src/components/shared/styles/devices.scss')}";
                 `,
             },
         }),
@@ -50,6 +49,9 @@ export default defineConfig({
             { from: path.join(__dirname, 'public') },
         ],
     },
+    html: {
+        template: './index.html',
+    },
     tools: {
         rspack: {
             plugins: [],

diff --git a/src/components/blockly-loading/blockly-loading.tsx b/src/components/blockly-loading/blockly-loading.tsx
@@ -1,12 +1,11 @@
 import { observer } from 'mobx-react-lite';
+import { useStore } from '@/hooks/useStore';
 import { Loader } from '@deriv-com/ui';
 
-// import { useDBotStore } from '@/hooks/useStore';
-
 const BlocklyLoading = observer(() => {
-    // const { blockly_store } = useStore();
-    // const { is_loading } = blockly_store;
-    const is_loading = false;
+    const { blockly_store } = useStore();
+    const { is_loading } = blockly_store;
+
     return (
         <>
             {is_loading && (

diff --git a/src/components/flyout/flyout.tsx b/src/components/flyout/flyout.tsx
@@ -102,7 +102,7 @@ const FlyoutContent = (props: TFlyoutContent) => {
                                                 : false
                                         }
                                         onInfoClick={
-                                            help_content_config(__webpack_public_path__)[block_type] &&
+                                            help_content_config(window.__webpack_public_path__)[block_type] &&
                                             (is_search_flyout
                                                 ? () => setHelpContent(node)
                                                 : () => initFlyoutHelp(node, block_type))

diff --git a/src/components/flyout/help-contents/flyout-help-base.tsx b/src/components/flyout/help-contents/flyout-help-base.tsx
@@ -24,7 +24,7 @@ const HelpBase = observer(() => {
     } = flyout_help;
     const { is_search_flyout } = flyout;
 
-    const block_help_component = help_string && help_content_config(__webpack_public_path__)[block_type];
+    const block_help_component = help_string && help_content_config(window.__webpack_public_path__)[block_type];
     let text_count = 0;
 
     return (

diff --git a/src/stores/flyout-help-store.ts b/src/stores/flyout-help-store.ts
@@ -201,7 +201,7 @@ export default class FlyoutHelpStore {
     setExamples(block_type) {
         const { toolbox } = this.root_store;
         const all_examples = [...toolbox.toolbox_examples.childNodes];
-        const help_content = help_content_config(__webpack_public_path__)[block_type];
+        const help_content = help_content_config(window.__webpack_public_path__)[block_type];
         const examples_ids = help_content.filter(el => el.type === 'example').map(example => example.example_id);
         const examples = examples_ids.map(id => all_examples.find(example => example.id === id));
 

diff --git a/src/stores/load-modal-store.ts b/src/stores/load-modal-store.ts
@@ -423,7 +423,7 @@ export default class LoadModalStore implements ILoadModalStore {
         }
         if (!this.recent_workspace?.rendered) {
             this.recent_workspace = window.Blockly.inject(ref, {
-                media: `${__webpack_public_path__}assets/media/`,
+                media: `${window.__webpack_public_path__}assets/media/`,
                 zoom: {
                     wheel: true,
                     startScale: config.workspaces.previewWorkspaceStartScale,

diff --git a/src/utils/help-content/help-content.config.ts b/src/utils/help-content/help-content.config.ts
@@ -8,8 +8,8 @@ export const help_content_types = {
 
 const { TEXT, IMAGE, BLOCK, EXAMPLE } = help_content_types;
 
-export const help_content_config = public_path => {
-    __webpack_public_path__ = public_path; // eslint-disable-line no-global-assign
+export const help_content_config = (public_path: string) => {
+    window.__webpack_public_path__ = public_path;
     return {
         //= ================= Functions ==================
         procedures_ifreturn: [
@@ -116,9 +116,9 @@ export const help_content_config = public_path => {
             { type: TEXT },
             { type: TEXT },
             { type: TEXT },
-            { type: IMAGE, width: '100%', url: `${__webpack_public_path__}assets/media/is_candle_black.jpeg` },
+            { type: IMAGE, width: '100%', url: `${window.__webpack_public_path__}assets/media/is_candle_black.jpeg` },
             { type: TEXT },
-            { type: IMAGE, width: '100%', url: `${__webpack_public_path__}assets/media/is_candle_black_1.jpeg` },
+            { type: IMAGE, width: '100%', url: `${window.__webpack_public_path__}assets/media/is_candle_black_1.jpeg` },
             { type: TEXT },
         ],
         ohlc_values_in_list: [
@@ -146,9 +146,9 @@ export const help_content_config = public_path => {
             { type: TEXT },
             { type: TEXT },
             { type: TEXT },
-            { type: IMAGE, width: '100%', url: `${__webpack_public_path__}assets/media/create_variable.jpg` },
+            { type: IMAGE, width: '100%', url: `${window.__webpack_public_path__}assets/media/create_variable.jpg` },
             { type: TEXT },
-            { type: IMAGE, width: '100%', url: `${__webpack_public_path__}assets/media/set_variable.png` },
+            { type: IMAGE, width: '100%', url: `${window.__webpack_public_path__}assets/media/set_variable.png` },
         ],
         // =============== Time blocks ============
         epoch: [
@@ -206,14 +206,14 @@ export const help_content_config = public_path => {
             { type: TEXT },
             { type: BLOCK },
             { type: TEXT },
-            { type: IMAGE, width: '60%', url: `${__webpack_public_path__}assets/media/sma_formula.png` },
+            { type: IMAGE, width: '60%', url: `${window.__webpack_public_path__}assets/media/sma_formula.png` },
             { type: TEXT },
             { type: TEXT },
             { type: TEXT },
             { type: TEXT },
-            { type: IMAGE, width: '100%', url: `${__webpack_public_path__}assets/media/sma_chart_1.png` },
+            { type: IMAGE, width: '100%', url: `${window.__webpack_public_path__}assets/media/sma_chart_1.png` },
             { type: TEXT },
-            { type: IMAGE, width: '100%', url: `${__webpack_public_path__}assets/media/sma_chart_2.png` },
+            { type: IMAGE, width: '100%', url: `${window.__webpack_public_path__}assets/media/sma_chart_2.png` },
             { type: TEXT },
             { type: TEXT },
             { type: TEXT },
@@ -229,7 +229,11 @@ export const help_content_config = public_path => {
             { type: TEXT },
             { type: TEXT },
             { type: TEXT },
-            { type: IMAGE, width: '100%', url: `${__webpack_public_path__}assets/media/sma_array_explanation.jpeg` },
+            {
+                type: IMAGE,
+                width: '100%',
+                url: `${window.__webpack_public_path__}assets/media/sma_array_explanation.jpeg`,
+            },
         ],
         // =============== Root blocks ============
         trade_definition: [
@@ -293,7 +297,7 @@ export const help_content_config = public_path => {
             { type: BLOCK },
             { type: TEXT },
             { type: TEXT },
-            { type: IMAGE, width: '40%', url: `${__webpack_public_path__}assets/media/logic.png` },
+            { type: IMAGE, width: '40%', url: `${window.__webpack_public_path__}assets/media/logic.png` },
         ],
         // =============== Loops ============
         controls_whileUntil: [