Semigradsky Github contribution chart
Semigradsky Github Stats
Semigradsky Most Used Languages

Activity

25 Sep 2022

Semigradsky

moscowcss

Pushed On 25 Sep 2022 at 01:09:26

Semigradsky

GDG Minsk Web August Meetup

Pushed On 25 Sep 2022 at 01:09:26

Semigradsky

HolyJS

Pushed On 25 Sep 2022 at 01:09:26

Semigradsky

UfaDevConf

Pushed On 25 Sep 2022 at 01:09:26

Semigradsky

cinimex

Pushed On 25 Sep 2022 at 01:09:26

Semigradsky

Ural Digital Weekend

Pushed On 25 Sep 2022 at 01:09:26

Semigradsky

Autogenerate md

Pushed On 25 Sep 2022 at 01:09:26

Semigradsky

Stream recipes
Forked On 23 Sep 2022 at 08:02:27

Semigradsky

11.2 Writing to standard error (stderr)

  • We can write to it via console.error().

Or via console.warn(). This was a surprise for me.

Commented On 23 Sep 2022 at 08:02:27
Issue Comment

Semigradsky

React 18 createRoot supports

Feature looking for React 18 createRoot in storybook

https://reactjs.org/blog/2022/03/08/react-18-upgrade-guide.html#updates-to-client-rendering-apis

I'm getting warning as follow,

Currently I'm using following version,

"@storybook/addon-a11y": "6.4.22",
"@storybook/addon-actions": "6.4.22",
 "@storybook/addon-jest": "6.4.22",
"@storybook/addon-viewport": "6.4.22",
"@storybook/builder-webpack5": "6.4.22",
"@storybook/manager-webpack5": "6.4.22",
 "@storybook/react": "6.4.22", 

Forked On 11 Sep 2022 at 11:43:43

Semigradsky

@vladgorbachev why did you write it here? It is totally different issue, open your own.

Also, you use 7.x version - it has break changes, read the migration guide at first (MIGRATION.md).

Commented On 11 Sep 2022 at 11:43:43

Semigradsky

Create README.md

Pushed On 04 Sep 2022 at 09:58:19

Semigradsky

Merge pull request #53 from ksyusha123/ksyusha123-patch-1

Pushed On 04 Sep 2022 at 09:58:19

Semigradsky

fix thing-38 ru

Created On 04 Sep 2022 at 09:58:18
Issue Comment

Semigradsky

ModuleNotFoundError: Module not found: Error: Default condition should be last one

Hi! I tried to use this module to ignore airbnb-js-shims from storybook. It works with cjs, but doesn't work with esm, there is webpack error:

ERROR in ../../node_modules/@storybook/core-client/dist/esm/globals/polyfills.js 2:0-25
Module not found: Error: Default condition should be last one

manager (webpack 5.73.0) compiled with 1 error in 11652 ms 

polyfills.js code:

import 'regenerator-runtime/runtime';
import 'airbnb-js-shims';
import 'core-js/features/symbol'; 

Maybe add default export to index file?

Forked On 30 Aug 2022 at 10:36:37

Semigradsky

I am tried module.exports = {} / export default {} - it works for me.

Commented On 30 Aug 2022 at 10:36:37

Semigradsky

Design is Frontend

Pushed On 28 Aug 2022 at 10:18:34

Semigradsky

Sravni

Pushed On 28 Aug 2022 at 10:18:34

Semigradsky

Я ❤ Frontend 2022

Pushed On 28 Aug 2022 at 10:18:34

Semigradsky

Я.Субботник по разработке интерфейсов

Pushed On 28 Aug 2022 at 10:18:34

Semigradsky

Samokat.tech

Pushed On 28 Aug 2022 at 10:18:34

Semigradsky

СберМаркет Tech

Pushed On 28 Aug 2022 at 10:18:34

Semigradsky

GDG Minsk

Pushed On 28 Aug 2022 at 10:18:34

Semigradsky

Frontend Conf 2022

Pushed On 28 Aug 2022 at 10:18:34

Semigradsky

VK Tech Talks

Pushed On 28 Aug 2022 at 10:18:34

Semigradsky

Podlodka Frontend Crew

Pushed On 28 Aug 2022 at 10:18:34

Semigradsky

UfaDevConf

Pushed On 28 Aug 2022 at 10:18:34

Semigradsky

Autogenerate md

Pushed On 28 Aug 2022 at 10:18:34

Semigradsky

started

Started On 27 Aug 2022 at 02:59:16

Semigradsky

How do I share a MUI 5 theme across multiple micro front ends using Module Federation

I currently have multiple React v17 apps which utilise Module Federation from Webpack 5. I would like for my MUI 5 theme to be shared across all of these micro frontends without having a there own ThemeProvider wrapped around each exposed component. At present, APP 1 (Shell) adds a custom theme into the MUI ThemeProvider and all Micro UI's are lazy loaded as children. The custom theme works for the container components but not for the micro frontend components. I am following a micro frontend architecture with the following configuration:

  1. APP 1 (Shell) - Primary role is manage authentication, wrap theme and consume page components from other micro frontends.
  2. APP 2 (Home Page) - Expose page component and rely on theme rendering from shell.
  3. APP 3 (Another page etc..) - Expose page component and rely on theme rendering from shell.

...and so forth for all other micro frontends.

APP 1 - Module federation config:

const { ModuleFederationPlugin } = require('webpack').container
const { shared } = require('./shared/shared')

const homePage = 'https://localhost:8084';

var moduleFedConfig = new ModuleFederationPlugin({
    name: 'container',
    filename: 'remoteEntry.js',
    remotes: {
        homePage: `homePage@${homePage}/remoteEntry.js`,
    },
    shared: shared,
}); 

APP 2 - Module federation config:

const { ModuleFederationPlugin } = require('webpack').container;
const { shared } = require('./shared/shared');

var moduleFedConfig = new ModuleFederationPlugin({
    name: 'homePage',
    filename: 'remoteEntry.js',
    exposes: {
        './HomePage': './src/page/HomePage',
    },
    shared: shared,
});

module.exports = { moduleFedConfig }; 

Module federation shared dependencies config for both APP1 & APP2

const deps = require('../../../package.json').dependencies;

var shared = {
    react: {
        singleton: true,
        requiredVersion: '*',
    },
    'react-dom': {
        singleton: true,
        requiredVersion: '*',
    },
    'react-router-dom': {
        singleton: true,
        requiredVersion: '*',
    },
    '@okta/okta-auth-js/': {
        singleton: true,
        requiredVersion: 'auto',
    },
    '@okta/okta-react': {
        singleton: true,
        requiredVersion: 'auto',
    },
    '@reduxjs/toolkit': {
        singleton: true,
        requiredVersion: deps['@reduxjs/toolkit'],
    },
    'react-redux': {
        singleton: true,
        requiredVersion: deps['react-redux'],
    },
    '@emotion/react/' : {
        singleton: true,
        requiredVersion: '*',
    },
    '@emotion/styled' : {
        singleton: true,
        requiredVersion: '*',
    },
    '@mui/material' : {
        singleton: true,
        requiredVersion: '*',
    },
};

module.exports = { shared }; 

APP 1 (Shell) - Snip of theme provider code:

 React.useEffect(() => {
        const newIsLoaded =
            themeData.elementStyles !== null && themeData.theme !== null
        setIsThemeLoaded(newIsLoaded)
    }, [themeData.elementStyles, themeData.theme])

    return !isLoginRedirect &&
        authState?.isAuthenticated &&
        isThemeLoaded &&
        themeData.theme ? (
        <ThemeProvider theme={themeData.theme}>
            <CssBaseline />
            <AppContainer /> //All micro front end components are rendered within here
        </ThemeProvider>
    ) : (
        <Loading fadeIn />
    ) 

I would expect that because all the MUI modules are being shared as a singleton, all theme data setup in the initial shell would be accessible in the child micro frontend components.

Just to confirm as well that RTK & RTK Query work perfectly when shared so I suspect I'm missing something when adding a module to be shared for MUI 5 maybe?

If you need anything further then please don't hesitate to ask.

Thank you in advance.

Forked On 27 Aug 2022 at 12:47:55

Semigradsky

Do you really want to share a theme? When you updated the theme you will need to update all your micro frontends. I use MUI with module federations and I prefer to have micro frontends with their own ThemeProviders.

Commented On 27 Aug 2022 at 12:47:55

Semigradsky

started

Started On 23 Aug 2022 at 08:43:19

Semigradsky

started

Started On 22 Aug 2022 at 07:14:38

Semigradsky

started

Started On 22 Aug 2022 at 09:26:04
Issue Comment

Semigradsky

[Feat] Fail on invalid custom prop names

Changes:

Closes: #1765

  • Changes do not use logical operators. Instead regex is being used for simplicity.
    • I tried benchmarking the logical operators and regex using process.hrtime.bigint() and there's a few 100 nanoseconds of difference between the two approaches (using regex on a single character compared to logical operations on a single char code).
    • Please do suggest if you have any better approach for the solution.
  • Minimal test cases added
    • Following manual tests were done:
      • pcss.parse(':root { --var: #333 }')
      • pcss.parse(':root { --0ar: #333 }')
      • pcss.parse(':root { --_ar: #333 }') and pcss.parse(':root { ---ar: #333 }')
      • pcss.parse(':root { --~ar: #333 }'), which should fail.

Screenshots:

Forked On 22 Aug 2022 at 06:05:50

Semigradsky

Fails on valid

:root {
  --\.valid-name: green;
} 

Commented On 22 Aug 2022 at 06:05:50

Semigradsky

started

Started On 05 Aug 2022 at 09:03:15

Semigradsky

Fix link to Android instructions

Pushed On 01 Aug 2022 at 05:00:45

Semigradsky

Fix link to Android instructions

Pushed On 01 Aug 2022 at 05:00:29

Semigradsky

Fix link to Android instructions

Pushed On 01 Aug 2022 at 04:59:43

Semigradsky

Fix link to Android instructions

Created On 01 Aug 2022 at 04:58:13

Semigradsky

Fix link to Android instructions

Pushed On 01 Aug 2022 at 04:58:06

Semigradsky

FuckRKN1: freedom of speech and information

Forked On 01 Aug 2022 at 04:57:23

Semigradsky

#206 Add React 18 to peerDependencies

Refs #206

Forked On 29 Jul 2022 at 06:31:05

Semigradsky

@k-funk just add resize-observer-polyfill yourself.

Commented On 29 Jul 2022 at 06:31:05

Semigradsky

started

Started On 28 Jul 2022 at 08:22:42

Semigradsky

Update README.md

Pushed On 27 Jul 2022 at 06:14:28

Semigradsky

Merge pull request #52 from vegerot/patch-3

Pushed On 27 Jul 2022 at 06:14:28

Semigradsky

Update README.md

Created On 27 Jul 2022 at 06:14:26
Issue Comment

Semigradsky

React 18 createRoot supports

Feature looking for React 18 createRoot in storybook

https://reactjs.org/blog/2022/03/08/react-18-upgrade-guide.html#updates-to-client-rendering-apis

I'm getting warning as follow,

Currently I'm using following version,

"@storybook/addon-a11y": "6.4.22",
"@storybook/addon-actions": "6.4.22",
 "@storybook/addon-jest": "6.4.22",
"@storybook/addon-viewport": "6.4.22",
"@storybook/builder-webpack5": "6.4.22",
"@storybook/manager-webpack5": "6.4.22",
 "@storybook/react": "6.4.22", 

Forked On 26 Jul 2022 at 11:15:19

Semigradsky

@niug I have no idea. Create a new issue with a link to a reproducible demo

Commented On 26 Jul 2022 at 11:15:19
Issue Comment

Semigradsky

React 18 createRoot supports

Feature looking for React 18 createRoot in storybook

https://reactjs.org/blog/2022/03/08/react-18-upgrade-guide.html#updates-to-client-rendering-apis

I'm getting warning as follow,

Currently I'm using following version,

"@storybook/addon-a11y": "6.4.22",
"@storybook/addon-actions": "6.4.22",
 "@storybook/addon-jest": "6.4.22",
"@storybook/addon-viewport": "6.4.22",
"@storybook/builder-webpack5": "6.4.22",
"@storybook/manager-webpack5": "6.4.22",
 "@storybook/react": "6.4.22", 

Forked On 26 Jul 2022 at 06:38:19

Semigradsky

@niug I don't think that this is related to warning. Latest stable storybook (6.5.9) works great with React 18 for me.

Commented On 26 Jul 2022 at 06:38:19
Issue Comment

Semigradsky

Добавляет Cheer up Meetup Мск
Forked On 24 Jul 2022 at 01:03:22

Semigradsky

Никакого занудства, только душевные презентации на любые темы: от рейтинга гифок-поздравляшек из вотсапп до обзора на выдру.

Это точно про фронтэнд?

Commented On 24 Jul 2022 at 01:03:22