DEV Community: Tetragius

A litle bit CSS & Variable Fonts Magic

Tetragius — Sat, 11 May 2024 22:58:34 +0000

This demo scene is made with just one div element and CSS

The first thing you need is variable fonts. In short, these are fonts that can be additionally changed using preset parameters. More details can be found at the link. And some font examples here.

Such fonts, for example, support animation!!!

The technology itself is old (2017) and is supported by all browsers. (even in iphone, yes safari you are now a new IE, deal with it)

Take Wavefont and connect

@font-face {
  font-family: "Wavefont";
  font-style: normal;
  font-weight: 400;
  font-display: block;
  src: url(https://fonts.gstatic.com/l/font?kit=L0xjDF00m0cP6hefyOCpRdycFsGxSrqDyx4fE4tvQYb4bdT9BMpjKNNBaEg89a5MNuLeF1NOtSWF0DO3TeLnas9-UFAV50jD2MVCwuLxW9QGD-RdzQg4xEMmac-c01PLIiWA_utv7FG1lphvBzyKrk89iF8hOHu7BOJlKCbYDWByr1XoHkD2hr8Li65ZySOVwJ-cbMABOnalrQ7Bl8VCYtB0ldGbZzqVPP3KwTr6XOyeraWl0nxmzPJ9bj1Mqj5r6amJuhWSl_UCHsPRfaQPQxsFkuD_FShKP7gQwHNe_6vjYiTWhniwb4AmPdJoPUgKf57EEfSDBa_DbJhfs6hA-Uop13_HQizh08PnIVufXstx3mdRwN2YNTxv0mlgulcxePwhPGp1ENYSOdHCj_FuvB0xmye7ebYXUHoyE_p3akl41OuwMyxvCWnHSlC9MRkVLHdUaz5B9XonbFQE7OZJ&skey=8f673a4f0b34837&v=v10)
    format("woff2");
}

Defining the CSS properties of a div element

.wavefont-div {
  /**/
  font-family: "Wavefont", Tofu;
  font-variation-settings: "ROND" -100, "YELA" -40;
  background: linear-gradient(180deg, transparent 20%, #000 60%, var(--hga)),
    repeating-linear-gradient(transparent 0 6px, var(--g1) 4px 20px),
    repeating-linear-gradient(90deg, var(--g2) 0 4px, var(--g3) 4px 20px);
  filter: drop-shadow(0px -139px 71px var(--hgb));
  background-clip: text;
  color: transparent;
  /**/
}

Please note that the gradient uses a variable, they must be declared via @, this is important for animation

@property --bg1 {
  syntax: "<color>"; /* thanks to specifying the type of the variable, the CSS engine will understand how to animate this variable */
  inherits: false;
  initial-value: transparent;
}

and the animation itself

@keyframes time {
  0% {
    --hga: #dadae0;
    --hgb: #fef869;
    --g1: transparent;
    --g2: transparent;
    --g3: transparent;
  }

  25% {
    --hga: navy;
    --hgb: #fc0;
    --g1: black;
    --g2: white;
    --g3: black;
  }
/**/
}

Done, the full example below, despite support in different browsers, behaves differently due to different implementations, and everywhere except chrome the animation is lame, even in stoned fox :)

Thanks for reading!

Pure CSS "Matrix code" effect

Tetragius — Thu, 09 Dec 2021 18:54:35 +0000

Step 1

Create CSS property (better for animation)

@property --timer {
     syntax: '<integer>';
     inherits: false;
     initial-value: 1;
}

Or just

:root { --timer: 1; }

Step 2

Animate property

 @keyframes animate-letter {
     to {
         --timer: 26; /*26 -  the number of letters of the English alphabet*/
     }
 }

Step 3

Add some counter magic

.letter {
     counter-reset: timer var(--timer);
     animation: animate-letter 2s linear infinite running;
}

.letter div:before{
     content: counter(timer, lower-alpha);
}

lower-alpha - predefined counter styles

Now, at each step of the animation, the variable --timer will increase by 1 until it reaches 26. For each digit, the corresponding letter of the alphabet will be selected.

Step 4

Add more counters

.letter {
      counter-reset: timer-1 calc(var(--timer) + 1) timer-2 calc(var(--timer) + 2) timer-3 calc(var(--timer) + 3) timer-4 calc(var(--timer) + 4) timer-5 calc(var(--timer) + 5) timer-6 calc(var(--timer) + 6) timer-7 calc(var(--timer) + 7) timer-8 calc(var(--timer) + 8) timer-9 calc(var(--timer) + 9) timer-10 calc(var(--timer) + 10);
     animation: animate-letter 2s linear infinite running;
}
/*Add new counters, shifting each subsequent one by one*/

.letter div:before{
      content: counter(timer-1, lower-alpha) counter(timer-2, lower-alpha) counter(timer-3, lower-alpha) counter(timer-4, lower-alpha) counter(timer-5, lower-alpha) counter(timer-6, lower-alpha) counter(timer-7, lower-alpha) counter(timer-8, lower-alpha) counter(timer-9, lower-alpha) counter(timer-10, lower-alpha);
        writing-mode: vertical-rl; 
        text-orientation: upright;
}
/*Also directing text from top to bottom*/

Step 5

Add other effects and animations on the bite. And it's ready!

Create Arkanoid on React and Raxy

Tetragius — Tue, 09 Feb 2021 21:04:29 +0000

Create Store in Raxy

const initStore: IGame = {
  game: { width: 660, height: 450 },
  bricks: [{ x: 0, y: 0 }],
  base: { x: 0, y: 0 },
  bat: { x: 150, y: 52, height: 8, width: 150 },
  ball: { x: 150, y: 60, stick: true, a: Math.PI / 4, r: 15, k: 1 }
};

const instanse = raxyReact(initStore);
export const { store, transaction, subscribe, useRaxy } = instanse;

Create main game service for collision check

import { subscribe } from "./store";
subscribe("update", (e) => {}); // subscribe to store update

in codesandbox

Create score counter

import React from "react";
import { useRaxy } from "./store";

export default function Score() {
  const { state } = useRaxy((store) => ({
    score: store.bricks.filter((brick) => !brick.removed).length
  }));

  return <div className="score">Blocks : {state.score}</div>;
}

Create ball

import React, { forwardRef } from "react";
import { useRaxy } from "./store";

const Ball = forwardRef((props, ref: any) => {
  const { state } = useRaxy((store) => ({ ball: store.ball }));

  return (
    <div
      ref={ref}
      className="ball"
      style={{ bottom: `${state.ball.y}px`, left: `${state.ball.x}px` }}
    />
  );
});

export default Ball;

And then create Brick component with colllision check in codesandbox

Finally create Game component that binds all the others in codesandbox

Pay special attention to the code block

  const { store, state } = useRaxy(
    (store) => ({
      bricks: store.bricks,
      game: store.game
    }),
    { game: { ignoreTimeStamp: true }, bricks: { ignoreTimeStamp: true } }
  );

{ game: { ignoreTimeStamp: true }, bricks: { ignoreTimeStamp: true } }

This part says - do not redraw the component when changing children in the store.
Thus, when the ball moves and collisions, only score, a bat, a ball and a block with which it collided will be redrawn

Browser routing with canvas GSPA

Tetragius — Mon, 13 Jul 2020 16:27:09 +0000

Recently, I decided to try writing a designer for games with a component approach based on JSX and PIXI.JS

JSX for graphics

Tetragius ・ Jul 12 ・ 1 min read

#javascript #jsx #graphics #game

I have added route support to my project. You can now navigate using the history library while only hashHistory is supported.

JSX for graphics

Tetragius — Sun, 12 Jul 2020 15:33:00 +0000

I am developing this for myself but it may be interesting for others...

I like to develop games. For my home project, I use RPG Maker, based on the popular library PIXI.JS. But writing plugins for RPG is pure pain. I also like React (and I would like him more if no hooks were added to him)

So... After reading the excellent article "Build your own React" by Rodrigo Pombo. I decided to write my analogue react for pixi.js

What's the difference from React PIXI? It's not react just JSX + PIXI.

My idea is to write games like an app on react.

For example, I want to create a playing field, a player on it and some actions

<Field>
  <Player onChange={} />
  <Enemy onDstroy={} />
</Field>

And most importantly, I will subsequently be able to reuse or even create a library of gaming components like a design system for an application

I also wanted to apply declarative filters.

<Component>
  <Filter />
  <Filter />
/// more
</Component>

or textures.

<Component>
  {isAlive && <Texture />}
  {!isAlive && <Texture />}
/// more
</Component>

I wrote a small library, now it is enough to make simple games like visual short stories, or maybe more difficult

Repository and demo

If this topic is interesting then I could write about how it works and develop the project?

Simple tooltips on hooks

Tetragius — Sat, 08 Feb 2020 17:16:56 +0000

<Component ref={useTooltip('tooltip')}>Test content</Component>

This method allows you to create tooltips close to pure html

<div title="message">example</div>

instead of using complex wrappers like

<Tooltip content={'message'}>
    <div>example</div>
</Tooltip>

or etc.

CSS only list with expandable items

Tetragius — Tue, 18 Jun 2019 13:38:50 +0000

CSS only list with expandable items.
items with sticky header and footer.

Use CSS animation for game in js (just for fun)

Tetragius — Mon, 17 Jun 2019 13:49:31 +0000

When an element moves with the help of CSS animation, we can read its real coordinates in the JS code and use it in calculations. Thus css is engaged in animation, and JS - collision calculation.

Animation for block

@keyframes animation-a { 
    0% { 
       left: 400px;
    }
    50% { 
       left: 200px;
    }
    100% { 
       left: 400px;
    }
}

Blocks array

const blocks = [  // left, bottom, width, animation-name, duration
    [240, 240, 700, null],
    [0, 180, 200, null],
    [400, 140, 100, 'animation-a', 5],
    [400, 90, 250, null],
    [250, 40, 150, 'animation-b', 3],
    [0, 0, 250, null],
    [400, 0, 670, null],
    [0, -40, 700, null],
];

Prepare blocks for scene

function prepareBlocks() {
    for (let b in blocks) {
        let _block = blocks[b];
        let block = document.createElement('div');
        block.classList.add('block');
        block.style.left = `${_block[0]}px`;
        block.style.bottom = `${_block[1]}px`;
        block.style.width = `${_block[2]}px`;
        block.style.animationName = _block[3] || '';
        block.style.animationDuration = `${_block[4]}s` || '';
        scene.insertBefore(block, player);
        blocks[b] = block;
    }
}

Variant of microservices on the web.

Tetragius — Sat, 15 Jun 2019 14:00:20 +0000

Now there are many articles about microservice architectures on JS on the web.

I will make a reservation right away, I am against the use of the term “microservices” to the frontend on the web, in my opinion it is more correct to say “modules”.

Architecture

Core

Core - provides functionality for loading modules, shared state storage (for example redux), common data bus based on RxJS, common services of modal windows and notifications. If you wish, you can expand the list.

The core loads modules at the request of the user or at the request of another module.

Module

The module is a regular web application that can be assembled as a UMD module and exported outside the entry point for connecting to the kernel.

In my example there will be three of them: The main react component for rendering, the Reducer that needs to be connected to the shared storage, and the common services and functions that the module is ready to share according to contracts.

Module can be not only a page, it can be some kind of widget or plugin, or just a set of auxiliary functions

Communication between modules

Modules communicate via the kernel by requesting shared services. Or via RxJS bus according to the protocol specified in the contracts.

Explanation in the code

Inside the module

Most likely in your application there is something like

...
import App from './containers/app';
...

ReactDOM.render(
  <Provider store={store}>
    <Router>
        <App/>
    </Router>
  </Provider>,
  document.getElementById('app'),
);

to create a module, you just need to create a new file (for example, main.tsx) with the next content

export { default as Main } from './containers/app';
export { default as reducer } from './redux/reducers';
export { default as shared } from './services/shared-service';

This will be the three entry points expected by our core.

where

...'./redux/reducers'

const reducers = combineReducers<IState>({
  requests: requestsReducer,
  tasks: maintenanceTaskReducer,
  main: mainReducer
});

export default reducers;
...

...'./services/shared-service'

interface ISharedService {
    mapper(type: string, item: any);
    openPlate(type: string, item: any);
    render(type: string, item: any);
}

class $SharedService implements ISharedService {
    task = new MaintenanceTask(null, null);
    maintenance_audit = new Tasks.MaintenanceAuditTask(null, null);
    maintenance_detach_gui = new Tasks.MaintenanceDetachGuiTask(null, null);
    maintenance_utp_request = new MaintenanceTask(null, null);
    request = new MaintenanceRequest(null, null);
    mapper = (type: string) => this[type] && this[type].mapper || TaskFactoryByTypeName(type);
    openPlate = (type: string) => this[type] && this[type].openPlate || TaskFactoryByTypeName(type);
    render = (type: string) => this[type] && this[type].render || TaskFactoryByTypeName(type);
}

const SharedService = new $SharedService();

export default SharedService;
...

Let's say a little about SharedService. This is an exported static service.
A third-party module may request something from the core.

Find the module - module_name, then find the common service and the openPlate method in it, then call this method to render maintenance_detach_gui

(getShared in core explanation section)

The last file to add is a stub so that the module can work inside and outside the core.

import * as PS from 'portal-service';

class WebBase {

  static sendNotify(notify: any, type: string, delay: number, closeable: boolean = false) {
    try {
      return PS && PS.notification.send(notify, type, delay, closeable);
    }
    catch (e) {
      return;
    }
  }

  static sendStream(message: { type: string, body: any }) {
    try {
      return PS && PS.stream.next(message);
    }
    catch (e) {
      return;
    }
  }
}

export default WebBase;

Pay attention to the portal-service import, we will talk about it later.

And add to the webpack assembly module

...
output: {
    path: paths.build,
    filename: 'index.min.js',
    library: 'Main',
    libraryTarget: 'umd',
},
externals: {
    'portal-service': 'portal-service',
...

At the output we have to get three files.

index.min.js
main.css
manifest.json

manifest.json - core needs to load the module

{
    "id": "D63E7031-DD51-42E3-979E-85107F4DB58F",
    "name": "maintenance",
    "version": "7.0.0"
}

Inside the core

In order for portal-service to be available in the module, the closure function over the requireJS is used. This allows us to intercept the require ('portal-service') from the module.

And at the moment of interception, we return to the module our object providing the common services of the kernel.

(after building webpack, import ... from is replaced by require)

It also opens up the possibility for modules to load their own dependencies separately from the kernel and other modules.

But to use such a closure, it is necessary that the kernel be compiled by gulp, since the webpack uses its own mechanism instead of requireJS.

I chose such a mechanism because I didn’t want to push dependencies into the module from the kernel, I wanted the module to determine where the fire itself was running

registerPageSync(page: any): boolean {
        if ($ExtModuleService.registredPage[page.name]) {
            return true;
        }

        var self = this;

        function reqListener(responseText) {
            try {

                let getPage = new Function('exports', 'module', responseText + " ;return module.exports;");

                //dependency injection start

                let injectPrepare = new Function('injector', 'page', `

                    var closure = (function(r){
                        var _require = r;
                        var _modules = {};
                        return {require: require, modules: _modules};
                    })(window.require);

                    window.require = function(o, u){
                        try{
                            return closure.require(o, u);
                        }
                        catch(e){
                            if(!closure.modules[o]){
                                console.log('inject : ' + o + ' by: ' + page.name);
                                closure.modules[o] = injector(o, page);
                                return closure.modules[o];
                            }
                            else{
                                return closure.modules[o];
                            }
                        }
                    }

                `);

                var fakeInjector = function (name, page: any) {
                    if (name === "portal-service") {
                        return self.injectPortalService();
                    }
                    else {
                        if (page.dependencies) {
                            for (var depName in page.dependencies) {
                                if (depName === name) {

                                    let dep = page.dependencies[depName];
                                    let oReq = new XMLHttpRequest();
                                    dep.path && oReq.open("GET", `${dep.path}/${dep.fileName}`, false);
                                    !dep.path && oReq.open("GET", `pages/${page.name}/dependencies/${depName}/${dep.fileName}`, false);
                                    oReq.send();

                                    if (oReq.status === 200) {
                                        return eval(oReq.responseText);
                                    }
                                    else {
                                        return false;
                                    }

                                }
                            }
                        }
                    }
                }

                injectPrepare(fakeInjector, page);

                //dependency injection end

                let _page = getPage({}, { exports: null });

                let o = {};
                o[page.name] = React.createElement(_page.Main);

                if (_page.reducer) {
                    injectAsyncReducer(page.name, _page.reducer);
                }

                _.assign($ExtModuleService.registredPage, o);
                return true;
            }
            catch (e) {
                console.log(e);
                return false;
            }
        }

        let fileref = document.createElement("link");
        fileref.setAttribute("rel", "stylesheet");
        fileref.setAttribute("type", "text/css");
        fileref.setAttribute("href", `pages/${page.name}/main.css?ver=${page.version}`);
        document.getElementsByTagName("head")[0].appendChild(fileref);

        if (page.externalLib) {
            let lib = document.createElement("script")
            lib.setAttribute("type", "text/javascript")
            lib.setAttribute("src", `pages/${page.name}/${page.externalLib}?ver=${page.version}`);
            document.getElementsByTagName("head")[0].appendChild(lib);
        }

        let oReq = new XMLHttpRequest();
        oReq.open("GET", `pages/${page.name}/index.min.js?ver=${page.version}`, false);
        oReq.send();

        if (oReq.status === 200) {
            return reqListener(oReq.responseText)
        }
        else {
            return false;
        }

This will be available to the module upon calling portal-service.

 injectPortalService() {
        return {
            auth: AuthService,
            stream: MainService.mainStream,
            notification: NotificationService,
            ws: wsService,
            store: store,
            history: history,
            getPermissions: (name) => AuthService.getEmployeePermissionsByModule(name),
            shared: SharedService.services,
            getShared: (module) => SharedService.getSharedSafity.call(SharedService, module),
            modals: (props) => new ModalService(props)
        }
    }

So the module reducer connects to the global storage.

export const injectAsyncReducer = (name: string, asyncReducer: any) => {
    (<any>store).asyncReducers[name] = asyncReducer;
    (<any>store).replaceReducer(createReducer((<any>store).asyncReducers));
}

In the place where we want to render our module

...
{this.props.pages.map((page) =>
    [
        <Route
            key={page.id}
            path={`/${page.name}`}
            render={(props) => <PageContainer key={page.id + '_requests'} page={page} {...props} />} />
    ])
}
...

inside the PageContainer we use getPageElementAsync and render our module

 ExtModuleService.getPageElementAsync(_page).then(
    page => {
        if (page) {
            let content = React.cloneElement<any, any>(page as any, { ...this.props })
            this.setState({ content: content });
        }
        else {
            this.setState({ error: true });
        }
    }
);

How closure works

UMD modules always contain a string like

!function(e,t){"object"==typeof exports&&"object"==typeof module?module.exports=t...

This allows the closure described earlier to work.

Conclusion

This approach allows the development of modules for independent teams based on contracts. And run the modules as independent applications or as part of the core.

The kernel defines the mechanisms for loading and interacting with modules by coordinating their work and providing common mechanisms for work such as requesting user rights or authentication.

Of course, this is only one of the options for the implementation of microservice architecture on the web. And perhaps not the best. But it successfully works on my working project with more than six modules and ten widgets. Including a module that consists only of calls to common methods and renders from other modules.

And of course, the CORS and backend infrastructure settings were left behind the scene, but that’s another story.

Thank!

If you like you can also read:

BaseComponent for react

Tetragius — Fri, 14 Jun 2019 23:10:54 +0000

In most of my projects, I use inheritance from other components. And my base component is BaseComponent.

I know about the article "Composition vs inheritance", here only my point of view and some consequences from life experience.

My BaseComponent file look like this

import * as React from 'react';
import { Subject } from 'rxjs';

export interface IBaseComponentProps {
    hidden?: boolean;
}

export interface IBaseComponent<T> {
    _error?: boolean;
    view(template?: T): JSX.Element;
    errorView(): JSX.Element;
}


export default class BaseComponent<P = any, S = any, V = any>
    extends React.Component<Readonly<P> & IBaseComponentProps, S>
    implements React.Component<Readonly<P> & IBaseComponentProps, S>, IBaseComponent<V>{

    _error: boolean = false;

    constructor(props: P) {
        super(props);
    }

    componentDidCatch(error: Error, errorInfo: React.ErrorInfo) {
        this._error = true;
    }

    view(template?: V): JSX.Element {
        return null;
    }

    errorView() {
        return null;
    }

    render() {
        if (this.state && this._error) {
            return this.errorView();
        }

        const props = this.props;
        if (!props.hidden) {
            return this.view();
        }
        else {
            return null;
        }
    }
}

Further, when creating a component instead of,

class MyComponent extends React.Component<IProps, IState>

I do (ITemplate - optional)

class MyComponent extends BaseComponent<IProps, IState, ITemplate>

And what do I get from this?

And from the use of inheritance in general?

Consider the example of a component of the list item

interface ISimpleListItemProps<T> extends IBaseComponentProps {
    item: IItem & T;
    onClick?: (item: IItem & T) => void;
}

class SimpleListItem<P, S, T> extends BaseComponent<ISimpleListItemProps<T> & P>{
    constructor(props) {
        super(props);
    }

    onClick(item: IItem & T) {
        this.props.onClick(item);
    }

    view(props) {
        const item = props.item;
        return (
            <div 
            className="simple-list-item" 
            onClick={() => this.onClick(item)}>{item.title}
            </div>
        );
    }
}

Firstly, all components inherited from BaseComponent appear the hidden property
And if we need to hide a component we can use

    <SimpleListItem hidden={expression} ... />

instead of

    { expression && <SimpleListItem ... />}

I can also get the props in the view without using this and determine the errorView to display in case of a component crash.

In my case, BaseComponent also has a stream property.

    ...
    _error: boolean = false;
    _stream: Subject<any>;

    get stream(): Subject<any> { return this._stream }
    set stream(val: Subject<any>) { this._stream.next(val) }

    constructor(props: P) {
        super(props);
        this._stream = this.props.stream; /*!!!*/
    }
    ...

That allows me to add a common messaging bus for all components in one parent, which is convenient in some cases

For this, there is also the BaseContainer component, in which you can enable thread creation in the constructor. The presence of such a container allows you to better control and maintain the code.

    ...
    private _stream;

    get stream() { return this._stream };
    set stream(data) { this._stream.next(data) };

    constructor(props: P & IBaseContainerProps<T>, createStream?: boolean) {
        super(props);
        if (createStream) {
            this._stream = new Subject();
        }
    }
    ...

Return to inheritance and list items.

Now if I want to extend the functionality of the list item, I can inherit from the existing

interface IExtendedListItemProps<T> {
    onSelect?: (item: IExtendedItem & T) => void;
    onRemove?: (item: IExtendedItem & T) => void;
}

interface IExtendedListItemState {
    selected?: boolean;
}

export default class ExtendedListItem<P, S, T> extends SimpleListItem<IExtendedListItemProps<T> & P, IExtendedListItemState | S, IExtendedItem & T>{

    constructor(props) {
        super(props);
    }

    state = { selected: this.props.item.selected || false }

    onSelect(item: IExtendedItem & T) {
        this.setState({ selected: !this.state.selected })
        this.props.onSelect && this.props.onSelect(item);
    }

    onRemove(item: IExtendedItem & T) {
        this.props.onRemove && this.props.onRemove(item);
    }

    view() {

        const props = this.props;
        const state = this.state;
        const item = props.item;

        return (
            <div className={`extended-list-item${state.selected && ' extended-list-item__selected' || ''}`}>
                <div className="extended-list-item_select" onClick={() => this.onSelect(item)}></div>
                <>
                    {super.view()}
                </>
                <div className="extended-list-item_remove" onClick={() => this.onRemove(item)}></div>
            </div>
        );
    }
}

The new component has both the OnClick method and two new methods. I also use super.view () in a wrapper.

Create a drop-down list item that still has delete and highlight methods, but overrides the OnClick event — it now expands the item

...
    onClick(item: IExpandableItem & T) {
        this.toggle()
        this.stream.next(item);
    }

    view(template?: { body?: JSX.Element, footer?: JSX.Element }) {

        const props = this.props;
        const state = this.state;
        const item = props.item;

        const footer = template && template.footer || <div className="simple-footer">[---]</div>
        const body = template && template.body || item.body;

        return (
            <div className={`expandable-list-item${state.selected && ' expandable-list-item__selected' || ''}`}>
                <div className={"expandable-list-item_head"}>
                    {super.view()}
                </div>
                {
                    state.expanded && <div className="expandable-list-item_body">{body}</div>
                }
                {footer}
            </div>
        );
    }
...

Now I use the template attribute functions view and allows me to very briefly create a new component with a new footer

export default class ExtendedExpandableListItem
    extends ExpandableListItem<IExtendedExpandableListItemProps, IExtendedExpandableListItemState, IExtendedExpandableItem>{
    view() {
        const item = this.props.item;
        const footer = <div className="special-footer">{item.footer}</div>;
        return super.view({ footer });
    }
}

Conclusion

In some cases, inheritance provides an obvious advantage in the code before HOC or the composition of components. The readability of the code increases.
I also noticed that the use of inheritance can reduce the size of the final bundle of the application, since inheritance turns the webpack into prototype inheritance, and the HOC and composition of the components turn into new closure functions

Also, the use of inheritance from generic components like BaseComponent allows you to keep common logic in one place and, if necessary, redefine its behavior.

Thanks!

my previous article

State management library for react. Based on Proxy API.

Tetragius — Fri, 14 Jun 2019 11:51:13 +0000

I created it for myself but maybe someone will like it :)

DEMO

Motivation

I wanted to work with the state as with a regular object, not caring about anything. I did not want to write actions and reducers as in redux. Wanted something simple. Hide complex logic.

Meet Raxy

Github

Raxy means react plus proxy (JS Proxy API).
And it hides behind it all the work with the state. Giving you a proxied object

Raxy weighs approximately 2kb or 5kb with a polyfill for IE.

Instalation and usage

Instalation

its simple :)

npm install --save raxy

Then connect it in the project

import Raxy from 'raxy'; // with polyfill
import Raxy from 'raxy/next'; // without polyfill

Next, create a storage, in the example it is a simple object, but it can be with deep nesting. Raxy also proxies arrays (but more on that later)

const ToDo = {
    list: [
        {title: 'item 1', finished: false},
        {title: 'item 2', finished: false},
        {title: 'item 3', finished: false},
    ]
}
const {state, subscribe, connect} = new Raxy({ToDo});

state — proxied storage

Then you have two mechanisms for listening to changes. The first is the connect method. It takes as its arguments the react component and the storage mapping function into the component state.

export ConnectedComponent = connect(Component, store => ({list: store.list}));

Connect — returns the wrapped component

The second mechanism is the subscribe method; it takes callbacks as arguments, which returns an altered state. And the mapping function is similar to the connect method.

const subscriber = subscribe((state) => console.log(state), s => ({...s}));

Subscribe — returns an object with two methods: on and off

off — to suspend a subscription

on — to renew your subscription

If necessary, you can create a react hook

function useRaxy(mapper) {
    const [data, setState] = useState(mapper(state));

    useEffect(() => {
        let subscriber = subscribe(s => setState(s), mapper);
        return () => { // dont forget unsubscribe when dismount
            subscriber.off();
            subscriber = null;
        }
    });

    return data;
}

Usage

Now you can simply update the proxy object as an ordinary object.

state.list = state.list.map(i => {
            if(i === this.props.item){
                i.finished = !i.finished;
            }
            return i;
        });

or so, since arrays are proxied too

state.list[1] = {title: 'item 1', finished: true};
state.list[1].finished = false;

or even so

state.nested.a = 'new value';

if you need a kind of action from redux

const action = (c, e) => {
    const state = Object.assign({}, store.state);
    state.nested.c = c;
    state.nestedAgain.e = e;
    Object.assign(store.state, state);
}

action(4, 5);

You can also use history and redux-dev-tools

const history = createHashHistory({ basename: '/' });

const {state, subscribe} = new Raxy({
    list: [
        { label: 'item 1', status: false },
        { label: 'item 2', status: false },
        { label: 'item 3', status: true },
    ],
    /*!!*/ location: history.location, /*!!*/
    nested: { b: 2 }
});

state.subscribe(location => console.log(location), state => ({ location: state.location }));

history.listen(location => state.location = location);

const {state, subscribe} = new Raxy({});

const devTools = window.__REDUX_DEVTOOLS_EXTENSION__.connect();

devTools.init({ value: state });

subscribe(state => devTools.send('change state', { value: state }), state => ({ ...state }));

How it works

source file

Raxy — wraps the repository object recursively by calling the proxy method on all nested objects or arrays. Only the ‘set’ method is proxied.

By calling subscribe or connect a new subscriber is added to the stack.
To prevent a memory leak, you can unsubscribe from updates and remove proxy objects using the revoke method.

Inside the interception function of the ‘set’ method, a comparison is made between the memorized previous state and the new one. (The state is returned by the mapping function of the dedicated in subscribe or connect)

If the state is new, then the callback method for subscribe is called, or the setState method for the wrapped component.

For a component, if it is unmounted, an automatic cancellation of the state updates occurs.

If you like more information, you can refer to -> Github

Simple react state manager by Proxy API

Tetragius — Wed, 12 Jun 2019 22:23:39 +0000

Simple react state manager

Simple react state manager. You can work with state as with a regular object. Can be used with redux-devtools-extension and history.

More information